Less (linguagem de folha de estilo)

 Nota: Não confundir com less (Unix).

Less
Surgido em	2009
Última versão	1.4.0 (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. 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. LESS pode ser executado tanto no lado do cliente quanto no lado do servidor, ou pode ser compilado em CSS plano.

Variáveis

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.

@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

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.

.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

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.

#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;
}

Ligações externas

• Official LESS website
• LESS source code repository (Git)