Por que o CleverCSS é legal e como você pode ser também!

Senhores, hoje a postagem é sobre gerador de código CSS. Não me refiro aos editores gráficos poderosos que algumas empresas como a Adobe fornecem. Nosso foco hoje é o CleverCSS, uma biblioteca escrita em python que permite gerar código CSS de forma rápida e bastante maleável.

A grade idéia do CleverCSS é possibilitar a codificação de arquivos CSS fazendo uso fruto das facilidades de linguagens de programação, como funções e variáveis. Por exemplo, já pensou ser capaz de mudar todo o esquema de cores de seu site mudando apenas uma variável de um arquivo em formato CleverCSS?

A forma como isso tudo é feito também é bastante interessante. O CCSS se utiliza de uma DSL (domain specific language) bastante semelhante ao próprio css onde você pode definir suas regras de estilo, variáveis e funções (macros). Essa DSL, como não poderia deixar de ser, tem sua estrutura semelhante a uma mistura de python com CSS. Do python, foi retirada a identação, que serve para definir os blocos de regras de estilo, substituindo os usuáis caracteres de chave.

Do CSS foi retirado quase todo o resto. Vejamos uma regra simples, escrita em formato clevercss:

variavel = red
a:
    color: $variavel
    &:hover:
        color: $variavel.brighten()

Na primeira linha, temos a definição da variável variavel que irá guardar o valor de red, que já é definido (igual seria no css puro). Em seguida, temos a declaração do conjunto de regras para tags a. Nessa declaração, utilizamos a identação para definir o bloco com as regras, ou seja, tudo que estiver abaixo de a e dentro de sua identação será aplicado a a.

As regras definidas foram:

• Todo elemento a deve ter a cor armazenada em $variavel ($ dá acesso ao conteúdo de variavel).
• Ao ocorrer o evento hover (meta seletores), a cor da variável deve ser $variavel, só que mais clara (a macro brighten devolve a cor armazenada na variável 20% mais clara).

Caso você tivesse um site grande que usasse um padrão de cores composto por duas ou três cores, o exemplo acima poderia lhe ser bastante útil pois você poderia utilizar com diferentes graus de claridade baseados no esquema do site sem ter que escrever as cores toda vez.

Além do brighten, outro método interessante é o darken, que permite obter o valor da cor da variável escurecido em 20%. Ambos os métodos aceitam como argumento o grau de clareamento ou escurecimento da cor. Caso você queira que variável seja clareada em 10%, você escreveria: $variavel.brighten(10).

Um detalhe importante é que, código em formato CleverCSS não pode ser utilizado diretamente nos seus arquivos HTML. Eles devem ser primeiro convertidos para o formato CSS antes de serem utilizados. Para isso, você pode codificar seu próprio script de conversão, pode usar uma variação deste script, disponível no site do pocoo:

Ou pode utilizar o seguinte snippet:

Outros exemplos, tipos e macros são possíveis e estão definidos na DSL. Para uma referência mais completa, veja: http://sandbox.pocoo.org/clevercss/. 

Abraço senhores!