|
Less (linguagem de folha de estilo) Nota: Não confundir com less (Unix).
O Leaner Style Sheets, abreviado Less (estilizado como LESS) é uma linguagem para adicionar estilos dinâmicos (cores, fontes, espaçamento, apresentação visual) de código aberto, implementada por Alexis Sellier em 2009. Ela foi influenciada por Sass e influenciou a nova sintaxe "SCSS" do Sass, que adaptou sua sintaxe de formação de blocos do tipo CSS.[2] Sua primeira versão foi escrita em Ruby, mas em versões posteriores foi substituído por JavaScript. A sintaxe indentada de LESS é uma metalinguagem aninhada, uma vez que um código válido em CSS também é válido em LESS pois possuem a mesma semântica. LESS fornece os seguintes mecanismos: variáveis, aninhamento, mixins (uma classe que fornece métodos para outras classes), operadores e funções. A principal diferença entre LESS e outros pré-compiladores de CSS é que LESS permite a compilação em tempo real pelo navegador por meio de LESS.js.[3][4] LESS pode ser executado tanto no lado do cliente quanto no lado do servidor,[4] ou pode ser compilado em CSS plano. VariáveisLESS permite que sejam definidas variáveis, estas são definidas usando o sinal de arroba(@). A atribuição é feita com dois pontos ":". Durante a tradução, os valores das variáveis são inseridos no documento CSS de saída.[4] @color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
O código LESS acima seria compilado para o seguinte código CSS. #header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
MixinO mixin permite a incorporação de todas as propriedades de uma classe em outra classe por meio da inclusão do nome de classe como uma das suas propriedades, comportando-se deste modo como uma espécie de constante ou variável. Eles também podem se comportar como funções, e ter argumentos. Já o CSS não suporta mixins. Qualquer código repetido precisa ser repetido em todos os lugares. Com mixins a repetição de código fica mais eficiente e mais limpa, e a sua alteração também se torna mais fácil.[4] .rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
O código em LESS acima seria compilado para o seguinte código em 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;
}
Há um tipo de regras especial em LESS chamado de mixins paramétricos que podem ser misturados como classes, mas aceitam parâmetros. AninhamentoO CSS suporta aninhamento lógico, mas os blocos de código propriamente ditos não são aninhados. Com LESS é possível ter seletores dentro de outros seletores, o que torna clara a herança e faz com que as folhas de estilos sejam mais curtas.[4] #header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px;
}
}
}
}
O código em LESS acima seria compilado para o seguinte código em 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;
}
Funções e operaçõesÉ possível usar operações e funções em LESS. Com as operações é possível realizar a adição, subtração, divisão e multiplicação de valores das propriedades e cores, que podem ser utilizadas para criar relações complexas entre propriedades. As funções estão em correspondência biunívoca com o código JavaScript, permitindo a manipulação dos valores. @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%);
}
O código em LESS acima seria compilado para o seguinte código em CSS: #header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
Referências
Ligações externas |
||||||||||||||||||||
