Less (linguagem de folha de estilo)

Origem: Wikipédia, a enciclopédia livre.
(Redirecionado de LESS)
 Nota: Não confundir com less (Unix).
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

Less (Leaner Style Sheets; às vezes estilizada como LESS) é uma linguagem de folha de estilos dinâmica desenhada por Alexis Sellier. 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] LESS é de código aberto. Sua primeira versão foi escrita em Ruby, no entanto em versões posteriores, o uso de in Ruby foi depreciado e 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 e tem a mesma semântica. LESS fornece os seguintes mecanismos: variáveis, aninhamento, mixins, 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. As variáveis LESS são definidas com um 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;
}

Mixins[editar | editar código-fonte]

Os mixins permitem 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]

Ligações externas[editar | editar código-fonte]