Less (linguagem de folha de estilo)

Less | |
---|---|
![]() | |
Surgido em | 2009 |
Última versão | 1.4.0[1] (Predefinição:Release date) |
Criado por | Alexis Sellier, Dmitry Fadeyev |
Estilo de tipagem | dinâmico |
Influenciada por | CSS, Sass |
Influenciou | Sass, Less Framework, Bootstrap (v3) |
Licença | Apache License 2.0 |
Página oficial | lesscss.org |
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áveis
[editar | editar código-fonte]LESS 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;
}
Mixin
[editar | editar código-fonte]O 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.
Aninhamento
[editar | editar código-fonte]O 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
[editar | editar código-fonte]É 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
[editar | editar código-fonte]- ↑ http://github.com/less/less.js/blob/master/CHANGELOG.md
- ↑ Sass and Less Arquivado em 21 de junho de 2009, no Wayback Machine. Sass e Less (em inglês)
- ↑ «Is there a SASS.js? Something like LESS.js?». Stack Overflow (em inglês). Consultado em 17 de dezembro de 2024
- ↑ a b c d e «Getting started, Less.js». lesscss.org (em inglês). Consultado em 17 de dezembro de 2024