Olá pessoal, hoje vou passar uma dica para escrever CSS de forma mais rápida e fácil. Para muitos, o assunto “CSS” já está esgotado, já que estamos falando de uma tecnologia que teve seu primeiro release há 15 anos. Porém, com o advento do HTML5 e sua adoção como plataforma de desenvolvimento de aplicativos mobile e até desktops (como foi apresentado no Build do Windows8) o CSS voltou a ser assunto recorrente. Com isso, têm surgido vários projetos com objetivo de melhorar a sintaxe do CSS que por natureza é bastante limitada.

Um deste projetos que mais gosto é o LessCSS (http://lesscss.org). O bacana deste projeto é que ele torna o CSS uma linguagem dinâmica, adicionando comportamentos de variáveis, combinações, operações e funções. Vou explicar cada uma delas separadamente.

Variáveis (Variables):

Como o próprio nome diz, permite que você defina valores que podem ser reutilizados em vários pontos do arquivo. Ou seja, você pode escrever várias classes reutilizando a variável e depois fazer possíveis mudanças globais rapidamente. É uma excelente estratégia, para por exemplo criar temas variados de um mesmo CSS bastando mudar uma única linha de código.

Código Less

@cor-base: #FF3300;

h1 {  color: @cor-base; }
a {  color: @cor-base; }

CSS Compilado

h1 {  color: #FF3300; }
a {  color: #FF3300; }

Combinações (Mixins):

Com este recurso, você pode combinar classes incorporando definições de uma classe em outra. Para isso, é necessário apenas informar o nome da classe no lugar das definições. Fazendo isso, é como se você estivesse “copiando” as definições de uma classe para outra.

Código Less

@radius: 5px; 

.rounded-corners {
      border-radius: @radius;
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
}

.box {  .rounded-corners; }
#footer { .rounded-corners; }

CSS Compilado

.box {
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
} 

#footer {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

As combinações podem ainda, funcionar como funções. Para isso, é necessário definir um argumento com um valor padrão, que poderá ser sobreescrito por outro valor a seu critério da seguinte forma:

Código Less

.rounded-corners (@radius: 5px) {
     border-radius: @radius;
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
}

.box { .rounded-corners; }
.boxbig {  .rounded-corners(12px);  }

CSS Compilado

.box {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.boxbig {
     border-radius: 12px;
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
}

Seletores aninhados (Nested Rules):

Ao invés de definir aqueles loooooooongos seletores para especificar regras muito “internas” do tipo: “todo link que estiver dentro de um páragrafo que estiver dentro do conteúdo principal e dentro de um div” ou “#content div p a”. Você pode simplesmente organizá-los utilizando “aninhamento”, colocando uns dentro dos outros. Nem é preciso dizer que isso deixará seu arquivo muito menor e mais legível.

Código Less

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

CSS Compilado

#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 (Functions e Operations):

As funções e operações permitem que você faça operações básicas com os valores de suas classes como multiplicar o valor da borda por dois ou dividir a largura de uma div por quatro. O mais legal é que você pode fazer isso também com cores utilizando várias funções disponíveis no framework, como: saturate, darken e lighten e etc…

Código Less

@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%);
}

CSS Compilado

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Instalação:

Para começar a utilizar o LessCSS no seu projeto agora mesmo, basta efetuar o download do plugin javascript neste link. Em seguida adicione a referência do script no HEAD do seu documento HTML. Desta forma:

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

Em seguida crie um arquivo com a extensão .less e utilize um link para referenciá-lo no mesmo documento. É muito importante que isso seja feito antes da declaração do script. Ou seja, certifique-se de que esta linha esteja antes do script: “less.js”.

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

Feito isso, você pode começar a brincar com todos os recursos desta linguagem. No site do projeto tem um guia de referência bastante completo (em inglês). Foi de lá que retirei os exemplos deste artigo. Divirtam-se.