Como todos devem ter percebido, nos últimos meses o CSS3 e o HTML5 tem ganho um grande destaque no desenvolvimento web. Grandes empresas como o Google, Microsoft, Adobe e Apple estão apoiando fortemente o desenvolvimento web utilizando WebStandards. Caso você já conheça algo sobre CSS, provavelmente deve saber como é complicado a organização desses documentos em um projeto de médio ou grande porte. Dado esses problemas conhecidos, foram surgindo os chamados pré-processadores de CSS, que viabilizam a criação de documentos de estilo, adicionando novas funcionalidades.
Hoje vamos conhecer o LESS, The Dynamic Stylesheet Language. O objetivo dessa biblioteca em javascript é prover uma série de funcionalidades para as, usualmente criadas a mão, folhas de estilos. Recursos tais como, variáveis, mixins (Multiple Inheritance, Traits), mixins parametrizáveis, funções, namespaces, importação, etc. Vamos aprender como utilizar os principais recursos dessa biblioteca em um projeto e como aproveitar o melhor dessa biblioteca para organizar corretamente nossas folhas de estilo.
Variables
As variáveis ajudam-nos a definir valores que podem ser utilizados em diversas regras do nosso CSS. Elas possuem escopo assim como em uma linguagem de programação orientada a objetos, trocando em miúdos:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Arquivo stylesheet.less
// Essa variável foi definida no escopo do arquivo, logo, todas as regras do arquivo podem acessar seu valor. @siteBackgroundColor: #FF3300; // Laranja h1 // Isto significa que, se criarmos uma outra regra chamada &.mainTitle h2 |
O que é interessante no uso de variáveis é a reutilização e organização. Imagine uma design guideline onde existem RGBs específicos a serem seguidos, essas cores poderiam ser definidas em um documento chamado color_variables.less e adicionados ao nosso arquivo principal utilizando a clausula @import.
@Import – Importando outros arquivos
Quando um arquivo LESS é importado, todas as suas variáveis e mixins são adicionados ao arquivo principal. Os escopos serão mantidos e a extensão .less é opcional.
@import “lib.less”
@import “lib”
É possível utilizar pastas nas clausulas de @import:
@import “where/is/my/stylesheet.less”
@import “where/is/my/stylesheet”
Mixins
No LESS, mixis são como uma espécie de classe CSS que pode ser reutilizada em diversas outras regras. Quando utilizadas, todas as propriedades definidas no mixin são adicionadas a regra onde a mesma foi adicionada, caso um mixin mude, todas as regras que o referenciam serão também modificadas.
Imagine o conceito de mixin como classes CSS orientadas a objeto, o que é interessante do mixin é que temos aqui algo como uma herança múltipla, caso uma mesma instrução seja declarada em mixins diferentes, e esses mixins adicionados a uma regra, o mixin declarado por último terá vantagem na construção final do CSS da regra onde foi adicionado.
|
1
2 3 4 5 6 7 8 9 10 11 12 |
.bordered
border-top: dotted 1px black; border-bottom: solid 2px black; // Declaramos agora uma regra qualquer que fará uso do nosso mixin. |
Quando modificarmos o mixin .bordered, todos os elementos que o estão utilizando serão modificados. Reutilização!
Vamos para um exemplo mais usável para exemplificar como é um mixin parametrizável.
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Bordas arredondadas cross-browser.
// Observe que utilizamos algo parecido com uma função de javascript para declararmos nosso mixin. // A notação de variável deve ser adicionada (@radius), com isso, criamos uma variável chamada “radius” no escopo // do mixin que poderá ser utilizada apenas internamente pelo método. // Observe também que declaramos um valor padrão para o parâmetro, de 5px. .border-radius( @radius: 5px ) // Repare que utilizamos a mesma variável para todas as regras. border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Para utilizarmos a regra, seguimos o mesmo padrão |
É importante destacar que um mixin pode conter diversos parâmetros. Isso pode ser feito da seguinte forma:
|
1
2 3 4 5 6 |
// Declaramos um novo mixin
.border-radius-and-color( @radius: 5px, @borderColor: #000000 ) .border-radius( @radius ); // Observe que aqui reutilizei o mixin previamente definido. Composição de mixins. border: 2px solid @borderColor; // Adicionamos agora a cor para a borda. |
Nested Rules
Com o LESS você pode criar suas regras de CSS utilizando uma espécie de hierarquia. Vamos ver como isso funciona na prática.
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Dado o CSS abaixo
div#header #menu … rules div#header #menu li a div#header #topNav |
Com o LESS, o mesmo CSS acima poderia ser escrito da seguinte forma:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Como utilizar hierarquia com Less
div#header #menu ul li #topNav |
Depois de processado, o CSS será exatamente igual. Você não precisa utilizar esse esquema de hierarquia caso não queira, é importante lembrar que o LESS é apenas uma extensão do CSS, se for de desejo do desenvolvedor, podemos escrever um código LESS sem usar nenhum recurso especial, como se fosse um CSS tradicional.
Operations
Com o LESS o seu CSS sabe fazer contas. Qualquer número, cor ou variável pode ser utilizada em uma operação aritmética.
Ele sabe identificar quando estamos utilizando uma cor ou um número, por exemplo:
|
1
2 3 4 5 6 7 |
@base: 5%;
@filler: @base * 2; @other: @base + @filler; color: #888 / 4; |
Assim como no javascript, é possível também utilizar parênteses nas suas operações:
|
1
|
width: (@var + 5) * 2;
|
Color Functions
Na minha opinião um dos recursos mais úteis durante o desenvolvimento de uma aplicação. Podemos efetuar operações em cima de RGBs, por exemplo, imagine que o layout do seu website foi criado baseado-se em apenas uma cor, utilizando diversos tons dessa cor. Com o LESS é possível utilizar métodos pré-definidos como lighten, saturate, darken, fadein, fadeout e spin. Esses métodos retornam sempre um RGB que pode ser utilizado em seu LESS. Vejamos alguns exemplos:
|
1
2 3 4 5 6 7 8 9 |
@base: #f04615;
.class // Utilizo a cor base 25% mais clara |
É possível também extrair informações de uma determinada cor para ser utilizada em outra.
Isso é feito a partir dos métodos hue, saturation e lightness.
|
1
2 3 |
hue(@color); // retorna o valor do canal ‘hue’ da cor @color
saturation(@color); // retorna o valor do canal ‘saturation’ da cor @color lightness(@color); // retorna o valor do canal ‘lightness’ da cor @color |
Namespaces
Em dado momento necessitamos organizar uma série de mixins e variáveis. Para isto podemos utilizar um conceito presente no LESS chamado Namespaces. Assim como em linguagens de programação orientadas a objetos, que possuem o conceito de pacotes, os namespaces fornecem encapsulação para nossas folhas de estilo. Isso pode ser implementado facilmente utilizando a mesma notação de ID do CSS tradicional. Vejamos.
|
1
2 3 4 5 6 7 8 9 10 11 12 |
#bundle
.button () display: block; border: 1px solid black; background-color: grey; &:hover background-color: white } .tab … .citation … } |
Verifique que acima, criamos um mixin chamado button dentro do namespace bundle. Para o utilizarmos devemos fazer da seguinte forma:
|
1
2 3 4 |
#header a
color: orange; #bundle > .button; // Estamos acessando o namespace ‘bundle’ e fazendo uma chamada para o mixin ‘button’. |
Uma utilização muito comum dos namespaces é na criação de pequenas bibliotecas de utilidades. Imagine que sua empresa pode possuir uma série de arquivos LESS, e em um determinado projeto você necessita de acesso a esses mixins, variáveis, etc. Organizar seus documentos com namespaces fácilita a visualização e localização de uma determinada instrução no seu documento LESS, como por exemplo, um mixin customizado que pode ser facilmente encontrado a partir da sua indicação de namespace.
|
1
2 3 |
someRule
#dclick > .border-radius(10px); |
Conclusão
Como podemos ver, o LESS facilita uma série de tarefas que são praticamente impossíveis de serem efetuadas pelo CSS tradicional.
Aconselho a todos que tenham interesse em se aprofundar mais na biblioteca a conhecer o website (http://lesscss.org/). Lá você poderá encontrar a documentação com maior riqueza de informações também poderá ver alguns exemplos de código que não foram abordados nesse post.
Qualquer dúvida, sinta-se a vontade e envie-nos um comentário!
Abraço!
by Don Norman
by Steve Krug
by Bill Buxton
by Don Norman
by Alan Cooper
by Peter Merholz, Todd Wilkens, Brandon Schauer, and David Verba
by Jesse James Garrett
by Alan Cooper, Robert Reimann, and David Cronin
by Joshua Porter
by Jenifer Tidwell
by Kevin Mullet
by Louis Rosenfeld and Peter Morville
by Jakob Nielsen
by Dan Brown
by S. M. Casey
