O Less é um framework de escrita de css que permite utilizar variáveis, herança e outros coisas giras. Mencionei-o há uns posts atrás, linkando as versões de ruby e .net. As versões que mencionei são construídos server-side. Actualemnte, o Less está a ser portado para javascript, permitindo a mesma funcioanlidade mas processado do lado do cliente. Este post refere essa evolução:

http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

Outro framework do género a ver: Sass http://sass-lang.com/

Ainda no outro dia, falava com os meus colegas de como seria muito bom que o CSS tivesse estruturas de herança incorporados e variáveis.. especialmente variáveis, para não ter de definir constantemente as mesmas coisas.

E hoje enquanto lia o blog do Spaanjaars, descubir o .Less, uma biblioteca dedicada a extender o CSS, introduzindo variáveis e esquemas de herança. Soa bem? Se soa!!

Com o .Less, podemos escrever codigo com variáveis:

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

Ou nestings de selectores:

#header {
    color: red;
    a {
       font-weight: bold;
       text-decoration: none;
    }
}

Ou misturas de elementos:

.rounded_corners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
 
#header {
  .rounded_corners;
}
 
#footer {
  .rounded_corners(10px);
}

Lindo, né? Originalmente, o Less foi construído para o Ruby (é um gem para o Ruby), mas um grupo converteu-o para .Net, criando o .Less. E ainda bem! No .Net, funciona como um HTTPHandler. Os ficheiros de CSS são ficheiros .less que são transformados aquando do pedido da página. É também possível usar templates T4 para criar versões estáticas do CSS.

A experimentar!