apresentaçãoless
DESCRIPTION
Apresentação realizada durante a III Semana Acadêmica de Computação na UFPA.TRANSCRIPT
AGENDA
A Linguagem
Como começar
Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
Referências
A LINGUAGEM
- Pré-processador que gera folha de estilo.
- Código aberto.
- Estender CSS.
- Retrocompatível.
- Fácil de aprender.
A LINGUAGEM
Manutenção
Copy/Paste
Produção
AprendizadoSintaxe
Existente
June 11, 12Fonte:http://css-tricks.com/poll-results-popularity-of-css-preprocessors/
AGENDA
A Linguagem
Como começarComo começar
Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
Referências
COMO COMEÇAR?
Sublime Text 2Sublime Text 2
1. CRTL + SHIFT + P
2. Digite “Install”
3. Digite Less-Build
EclipseEclipsePlugin for Less: XText
(+ info) http://bit.ly/1b1bQwj
COMO COMEÇAR?
Cliente / Servidor
It's easy!
COMO COMEÇAR?
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
AGENDA
A Linguagem
Como começar
Variáveis Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
Referências
VARIÁVEIS
Permite a utilizaçãoutilização e o
reusoreuso de valores em um
únicoúnico local.
VARIÁVEIS
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
// Compiled CSS
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
VARIÁVEIS
Outro ExemploExemplo:
Em vez disso...Em vez disso...
a.brisa{
background-image: url("/site/padrao/theme1/imagens/brisa.jpg");
}
a.mar:{
background-image: url("/site/padrao/theme1/imagens/mar.jpg");
}
VARIÁVEIS
Que tal isso?Que tal isso?
@pathImagens: "/site/padrao/theme1/imagens/";
a {
&.brisa {
background-image: url("@{pathImagens}@{pathImagens}brisabrisa.jpg");
}
&.mar {
background-image: url("@{pathImagens}mar.jpg");
}
}
AGENDA
A Linguagem
Como começar
Variáveis
MixinsMixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
Referências
MIXINS
Incorporar todas as
propriedades de uma classe
dentro de uma outra classe.
Podem se comportar como
funçãofunção.
MIXINS
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
// Compiled CSS
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
AGENDA
A Linguagem
Como começar
Variáveis
Mixins
Regras AninhadasRegras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
Referências
REGRAS ANINHADAS
Torna a herança mais claramais clara
e diminuidiminui o stylesheet.
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
// Compiled CSS
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
REGRAS ANINHADAS
AGENDA
A Linguagem
Como começar
Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
Referências
FUNÇÕES & OPERAÇÕES
FunçõesFunções permitem
manipular valores.
OperaçõesOperações permitem somar,
subtrair, dividir, multiplicar
propriedadespropriedades e corescores.
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
// Compiled CSS
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
FUNÇÕES & OPERAÇÕES
AGENDA
A Linguagem
Como começar
Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheetImportação de stylesheet
Escopo de variáveis
Referências
IMPORTAÇÃO
Que tal modularizarmodularizar os
arquivos .lessless?
// topo.less
@colorFundo: #FFCC00;
#fundo {
background-color:@colorFundo;
}
// importando os outros arquivos
@import "topo.less";
@import "conteudo.less";
@import "rodape.less";
IMPORTAÇÃO
.css.cssvariáveivariávei
ss
AGENDA
A Linguagem
Como começar
Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveisEscopo de variáveis
Referências
ESCOPO DE VARIÁVEIS
Variáveis podem ser criadas
em diferentes escopos.
Os Escopos são delimitadosdelimitados
por seletores de elementosseletores de elementos
ou mixinsmixins.
@var: red;
#page {
@var: white;
#header {
color: @var; // whitewhite
}
}
#footer {
color: @var; // redred
}
ESCOPO DE VARIÁVEIS
AGENDA
A Linguagem
Como começar
Variáveis
Mixins
Regras Aninhadas
Funções e Operações
Importação de stylesheet
Escopo de variáveis
ReferênciasReferências
REFERÊNCIAS
http://lesscss.org/
http://lesscss.loopinfinito.com.br/http://lesscss.loopinfinito.com.br/
REFERÊNCIAS
LESS. LESS. The dynamic stylesheet languageThe dynamic stylesheet language. <. <http://lesscss.org/>. Acesso >. Acesso
em 03/11/2013.em 03/11/2013.
LOPES, Sérgio. LOPES, Sérgio. CSS fácil, flexível e dinâmico com LessCSS fácil, flexível e dinâmico com Less. .
<http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/>. <http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/>.
Acesso em 03/11/2013.Acesso em 03/11/2013.
LOPES, Sérgio. LOPES, Sérgio. Saiba o que é Less, e como ele pode agilizar seu Saiba o que é Less, e como ele pode agilizar seu
trabalhotrabalho. <http://tutsmais.com.br/blog/css/saiba-o-que-e-less-e-. <http://tutsmais.com.br/blog/css/saiba-o-que-e-less-e-
como-ele-pode-agilizar-seu-trabalho/>. Acesso em 03/11/2013.como-ele-pode-agilizar-seu-trabalho/>. Acesso em 03/11/2013.