Aumente sua produtividade com o LESS CSS

Veja neste artigo a apresentação do framework LESS para se trabalhar com dinamismo em CSS, aumentando a produtividade do desenvolvedor front-end.

por Vinicius Moraes

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:

1. Implementar dinamismo nas folhas de estilos;
2. Trabalhar com recursos fundamentais da programação, como funções e classes;
3. Facilitar a manutenção e alteração de valores nas folhas de estilos;
4. Reaproveitar estilos no CSS;
5. 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");

Concluo aqui este artigo cujo 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