Temple Coding

CSS é muito útil: já evita muita repetição dentro das páginas HTML, mas o próprio CSS em si permite (e causa) muita repetição.

Por exemplo, imagine que você tenha uma cor padrão no seu site, com certeza você deve ter algumas regras dentro do css usando essa cor.

Estava eu fuçando na internet e achei o .LESS, uma ferramenta (acho q posso chamar de ferramenta) para fazer, como eles mesmos chamam, Dynamic CSS.

O conceito é simples, ali é possível declarar uma variável @cor_padrao, por exemplo, e usar em todo lugar.

Veja o exemplo que fiz abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@cor_principal: silver;
@cor_fonte: blue;
@largura_padrao: 400px;
 
body{
    background-color: @cor_principal;
    color: @cor_fonte;
}
 
.bordaVermelha{
    border: dashed red 2px;
}
 
#cabecalho
{
    .bordaVermelha;
    width: @largura_padrao + 40px;
    color: @cor_fonte;
    a
    {
        text-decoration: underline;
    }
    ul
    {
        li
        {
            float: left;
        }
    }
}

Olhando para esse código vemos as funcionalidades do LESS. Primeiro a declaração de duas variáveis que podem ser utilizadas dentro de qualquer parte do css.

Depois na regra do estilo para o id #cabecalho vem algumas coisas bacanas. Por exemplo: dentro dessa regra eu chamei a classe .bordaVermelha e tudo que estava definido ali foi reaproveitado, como um “include”, por assim dizer. Além disso, na largura eu fiz uma operação de adição sobre uma variável que já estava definida com a largura, evitando criar mais uma variável. E por último, e na minha opinião, um dos recursos mais legais, é o aninhamento de regras css. Se não fosse pelo LESS, o código do cabeçalho seria algo assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#cabecalho
{
    border: dashed red 2px;
    width: 440px;
    color: blue;
}
#cabecalho a
{
    text-decoration: underline;
}
#cabecalho li
{
    float: left;
}

Nesse exemplo, pode até não parecer muito diferente, mas a questão é que todas as regras ficaram dispersas, imagine um arquivo grande de CSS, é muito mais fácil quando tudo está definido só em um lugar.

Como usar o .LESS?

Muito simples, é só um assembly que deve ser baixado do site deles. Adicione esse assembly como referência no projeto e a seguinte configuração de httpHandler deve ser adicionada ao seu web.config:

Depois disso, basta renomear seus arquivos .css para .less. E nas páginas faça referência diretamente ao arquivo .less.

Conclusão

O CSS foi feito para (entre outras coisas) minimizar o código que temos que fazer para definir um layout em nossas páginas e o .less veio dar uma forcinha.