Aumente sua produtividade com o LESS CSS

CSS (Cascading Style Sheets) é uma linguagem de marcação utilizada na camada de desenvolvimento para apresentação de documentos. Conheça o LESS e aumente sua flexibilidade.

O LESS é um pré-processador para CSS que possui sua sintaxe também baseada em CSS, tornando-se um framework fácil, flexível e dinâmico para desenvolvimento web. Cada vez mais é exigido do desenvolvedor front-end um melhor desempenho, e essa tecnologia web facilita e muito o desenvolvimento de aplicações. Porém é necessário antes um profissional com boa experiência como desenvolvedor front-end, caso contrário ele não irá desfrutar das vantagens do LESS.

Com o conhecimento do LESS você vai:

Implementar dinamismo nas folhas de estilos; Trabalhar com recursos fundamentais da programação, como funções e classes; Facilitar a manutenção e alteração de valores nas folhas de estilos; Reaproveitar estilos no CSS; Escrever estilos mais simples.

Como configurar o LESS?

A implementação pode ser realizada de duas maneiras bem simples. A primeira é com Javascript e a segunda é pelo Node.js. Hoje explicarei a forma simples de instalação do LESS na sua aplicação web. O primeiro passo é configurar seu editor html para suportar a sintaxe CSS no arquivo css.less.

Então baixe less.js no lesscss.org no topo da página principal, a seguir adicione a tag ao header da página, com o atributo src preenchido com o caminho para o less.js. O atributo type não é obrigatório para documentos em HTML5.

Listagem 1: Referenciando o Less.js

<script src="less-1.3.0.min.js" type="text/javascript"></script>

Agora é preciso vincular o css.less e alterar no atributo rel para stylesheet/less. Coloque o caminho correto do arquivo css e o tipo de arquivo, que no caso é text/css.

Importante: certifique-se de incluir o arquivo de estilo antes do elemento script.

Listagem 2: Referenciando o CSS.LESS

<link rel="stylesheet/less" href="css.less" type="text/css">

Variáveis

Um recurso fundamental para programação é a criação de variáveis e com o LESS é possível definir valores em suas folhas de estilos. Facilitando a manutenção e alteração de valores no css, que muitas vezes é necessário fazê-lo. O exemplo abaixo pode ser utilizado em diferentes propriedades e estilos do css.

Listagem 2: Exemplo de uso de variáveis

@verde: #6BAF2A;
@fonte_h1: bold 18px "Times New Roman", Arial;
 
h1{
    color: @verde;
    font: @fonte_h1;
}
 
a{
    color: @verde;
}
 
LESS compilado para css:
 
h1{
    color: #6BAF2A;
    font:  bold 14px "Times New Roman", Arial;
}
 
a{
    color: #6BAF2A;
}

Mixins

Conceito de OOP para utilização de classes dentro de classes. No LESS é permitido o reaproveitamento de estilos, apenas utilizando o nome da classe com ponto e vírgula no final de cada linha de comando dentro da definição de estilos de outros elementos.

Listagem 4: Exemplo de reaproveitamento de classes

.fonte{
    border: 1px solid #666;
    text-align: justify;
}
 
.header h2{
    text-decoration: uppercase;
    .fonte;
}
 
article p{
    margin: 0 11px;
    .fonte;
}
 
/*LESS compilado para css:*/
 
.fonte{
    border: 1px solid #666;
    text-align: justify;
}
 
.header h2{
    text-decoration: uppercase;
    border: 1px solid #666;
    text-align: justify;
}
 
article p{
    margin: 0 11px;
    border: 1px solid #666;
    text-align: justify;
}

Funções

O LESS permite parâmetros em mixins, podendo passar valores como: @radius: 10px. Essa dinâmica no CSS, sempre foi o sonho de todo desenvolvedor front-end. Criar funções para os estilos, isso sim é vida!! rsrs
Cuidado: o nível de interpretação de layout precisa ser levado em conta no momento do desenvolvimento. É necessário identificar os mixins na aplicação web.

Listagem 5: Exemplo de uso de funções

.font(@verde){
    color: @verde;
    border-bottom: 2px dotted @verde;
}
 
 
.bordaRadius(@radius: 10px){
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
 
article img{
    margin: 5px 0;
    .bordaRadius;  
}
 
/*LESS compilado para css:*/
 
.font{
    color: #6BAF2A;
    border-bottom: 2px dotted #6BAF2A;
}
 
.bordaRadius{
    border-radius: 10px;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;   
}
 
article img{
    margin: 5px 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;   
}

Hierarquia de estilos

Vamos imaginar o elemento header com vários elementos filhos e para estilizar esses elementos teríamos algo parecido com o exemplo abaixo:

Listagem 6: Exemplo de estilização de elementos filhos

header{
    width: 960px;
}
 
header .logo{
    display: inline;
    float: left;
    margin: 0 10px;
}
 
header nav{
    clear: both;
    padding: 5px 0;
}
 
header nav li{
    display: inline;
    float: left;
}

Agora vamos reescrever essa mesma hierarquia, uma dentro da outra. O LESS ficará responsável por gerar os elementos parent no navegador do usuário.
Cuidado: não abuse na criação de vários níveis, o bom senso é importante durante o desenvolvimento.

Listagem 7: Exemplo de estilização de hierarquia com o LESS

header{
    width: 960px;
 
    .logo{
        display: inline;
        float: left;
        margin: 0 10px;
    }
 
    nav{
        clear: both;
        padding: 5px 0;
    }
 
    nav li{
        display: inline;
        float: left;
    }
}

Como ficarão os pseudo-elementos no LESS?

O framework CSS disponibiliza o símbolo "&" para herança de atributos e pseudo-elementos. Exemplo:

Listagem 8: Utilização de pseudo-elementos

nav li a{
    border: 1px solid @verde;
    height: 30px;
    &:hover{
        background: #444;  
    }
}
 
/*LESS compilado para css:*/
 
nav li a{
    border: 1px solid @verde;
    height: 30px;
}
 
nav li a:hover{
    background: #444;  
}

Palhetas de cores automáticas

No processo de criação o design, forma-se uma palheta de cores e o front-end pega o código de cada cor e coloca na folha de estilo. Esse processo é diferente com o LESS, a saturação de cada cor é empregada no estilo, por exemplo. Mas o framework disponibiliza outras funções para cores, como: darken, desaturate, fadein, fadeout, spin e outros.

Listagem 9: Utilização de cores no LESS

/*cores automáticas*/
 
@cor: #FAA246;
 
article{
    border-left: saturate(@cor, 20%);
}
 
section{
    background: darken(@cor, 20%);
}
 
aside{
    background: desaturate(@cor, 20%);
}
 
header{
    background: fadein(@cor, 20%);
}
 
footer{
    background: fadeout(@cor, 20%);
}

String em variáveis

Semelhante ao PHP, o LESS permite criar variáveis com strings como valor.

Listagem 10: Uso de variáveis string

@base_url: "http://dominio.com.br";
 
background: url("@{base_url}/images/bg.png");
 
/*LESS compilado para css:*/
 
background:url("<http://dominio.com.br/images/bg.png>");

Este artigo tem o objetivo foi apresentar a ferramenta LESS para se trabalhar de forma mais prática com CSS.

Até a próxima.

Demo (Download): https://gist.github.com/3077176

Créditos: Vinicius Moraes

Tweet

Pin It