Turbine seu CSS com a biblioteca LESS

Já pensou em poder declarar variáveis, implementar funções em suas folhas de estilo? A biblioteca LESS chegou para ampliar o funcionamento do CSS, tornando-o altamente dinâmico.

Oque é LESS?

Básicamente LESS é uma biblioteca escrita em javascript que dá o poder ao seu CSS, ou seja, carregando o LESS em seu projeto você poderá fazer maravilhas com seu CSS, como multiplicação, funções, classes, objetos dentro de objtos,…..

Baixando a biblioteca LESS

visite http://lesscss.org e baixe o JS referente a biblioteca.

Como usar a LESS

Você precisará carregar após o CSS feito para LESS o javascript e colocar o link do seu CSS com .less:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Ou seja, ao invés de colocar styles.css colocaremos styles.less.

Variáveis no CSS

@base-color: #444;

body {
 color: @base-color;
 }

Como pode ser visto, a variável @base-color foi declarada e poderá ser utilizada em toda folha de estilo, como sendo variável padrão para a cor das fontes. show né?

Operadores matemáticos no CSS

@borda_padrao: 6px;
 @cor_padrao: #111;

div#conteudo {
 color: @cor_padrao * 2;
 border: (@borda_padrao / 3) solid #ccc;
 }

div#menu {
 color: darken(@cor_padrao, 10%);
 }

Como pode ser visto, as variáveis @cor_padrao e @borda_padrao recebem um valor inicial e mais abaixo são multiplicadas, divididas e adicionado porcentagem as variáveis.

Funções, Legal né?

.transition-simple (@type:all, @duration:1000ms, @tween:linear) {
 -webkit-transition: @type @duration @tween;
 -moz-transition: @type @duration @tween;
 -o-transition: @type @duration @tween;
 -ms-transition: @type @duration @tween;
 transition: @type @duration @tween;
 }

.overlay {
 opacity:1;
 .transition-simple (opacity, 250ms, linear);
 }

Analisándo o código acima veremos que, foi criada uma classe .transition-simple que funciona como uma função do PHP, pois foi passado nessa etapa .transition-simple (opacity, 250ms, linear);  variáveis ao função como opacity, 250ms, linear.

Observe também que na função .transition-simple () se não for passado nenhum atributo ela pegará os valores defaults da função.

Classes dentro de classes no CSS

.fonte-titulo{
 font-size: 36px;
 font-family: Helvetica, Arial, sans-serif;
 color: #666;
 letter-spacing: -2px;
 font-weight: 700;
 }

h1 {
 text-transform: uppercase;
 .fonte-titulo;
 }

h2 {
 .fonte-titulo;
 color: #000;
 }

O Mixins pode ser usado para incorporar várias propriedades em outra classe. Como podemos ver no exemplo acima uma classe pode estar dentro de outra classe e assim adotar todos os seus parâmetros.

Utilizando somente uma parte do Mixin

#titulo {
 .principal {
 font-size: 36px;
 letter-spacing: -2px;
 }
 .secundario {
 font-size: 24px;
 letter-spacing: -1.4px;
 }
 }#header h1 {
 color: #df0d32;
 #titulo > .principal;
 }

Objetos dentro de objetos

ul {
color:#000;
li {
a {
text-decoration:none;
&:visited {
color:#333;
}
&:hover {
text-decoration:underline;
}
}
}
}
 }

Essa é a que eu mais gosto, da forma apresentada acima podemos definir todas as opções de um objeto de uma tacada só!

Um teste para você fazer!

@variavel: 1px;
 div#conteudo {
 @variavel: 2px;
 div#titulo {
 border-size: @variavel;
 }
 }
 div#menu {
 border-size: @variavel;
 }

Analisando o código acima, qual será o valor da variável @variavel 1px ou 2 px?

Resposta: Uma variável possui um escopo global e outro local, dentro de sua função/mixin. O LESS vai sempre procurar primeiro por varáveis no escopo local e depois em seus antecessores, ou seja, o valor da @variavel será 2px.

Considerações finais:

Achei bem legal de trabalhar com a LESS e vale apena parar para entender o seu funcionamento, pois quem sabé daqui um tempo o W3C não adote algumas dessas regras para o CSS4. Mas como o seu css será compilado por um JS, caso o cliente deixe o JS desabilitado o LESS não irá funcionar.

Uma saída para que seu projeto fique mais rápido e que não pare, caso o usuário tenha o JS desativado em seu Browser, seria converter suas folhas de estilo estáticas, ou seja, já compilado o css final.

Para aplicativos Ruby/Rails existe uma gem que converte arquivos LESS para CSS. Já o o módulo compressor do Django oferece suporte nativo. Por isso provavelmente algo irá acontecer com os frameworks em PHP para aceitar o LESS.

Enquanto ainda não existe você pode converter o LESS para o CSS utilizando o programa LESS para Mac ou componente para o Internet Explore . visitando o site http://incident57.com/less/

E se você procura elementos já prontos, a dica é visitar o site Less Elements . Nele você encontra soluções para bordas, degradês e sombras.

Em http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/ você também terá acesso a 10 exemplos práticos da utilização do LESS.