BT
x A sua opinião é importante! Por favor preencha a pesquisa do InfoQ sobre os seus hábitos de leitura!

CSS mais Limpo com LESS ou Sass

por Werner Schuster , traduzido por Samuel Carrijo em 31 Jul 2009 |

CSS é onipresente no desenvolvimento web - mas às vezes é repetitivo. LESS e Sass são linguagens com implementações em Ruby que contribuem na escrita de arquivos CSS melhores. A abordagem de ambos é bastante semelhante: uma linguagem de entrada que é semelhante ao CSS, mas mais poderosa; e que é por sua vez traduzida pra CSS.

O conjunto de recursos adicionais ao CSS que ambas as linguagens oferecem é semelhante, consulte a documentação do LESS ou a documentação do Sass para mais detalhes. Segue abaixo um resumo de algumas funcionalidades:

  • Variáveis: @name no LESS ou !name no Sass são variáveis. É possível atribuir valores a elas e utilizá-los ao longo arquivo.
  • Aninhamento: traz outro recurso desejado para CSS: aninhamento de seletores um dentro do outro, em vez de ter de estender o aninhamento em várias definições de nível superior. Os tradutores do LESS e o Sass expandem esta notação concisa em CSS.
  • Mixins: permite extrair grupos de propriedades comuns, dar nome a eles e, em seguida, incluí-los no seletores. Desenvolvedores Ruby que conhecem os benefícios da Mixins em Ruby vão reconhecer a utilidade de Mixins em CSS. Sass também permite passar parâmetros aos Mixins, dando ainda mais flexibilidade.
  • Operações: tanto o LESS quanto o Sass permitem operações aritméticas simples como a soma, dando ainda mais flexibilidade às variáveis. As linguagens certificam-se de que unidades são conservadas corretamente em operações (ie. tamanhos de fonte, etc.)

O Sass é construído pela mesma equipe que criou Haml. O Sass usa a idéia do Haml de utilizar indentação como delimitador, em vez de delimitadores explícitos, como chaves, para definir blocos ou aninhamentos.
O tradutor e o parser escrito à mão do Sass convertem Sass em CSS substituindo os valores das variáveis por suas referências, expandindo os mixins, etc

LESS foi inspirado por Sass e lista sua razão de existir como tal:

Então, por que criar uma alternativa ao Sass? É simples: sintaxe. Uma das principais características do Sass é sua sintaxe baseada em indentação, o que lhe dá um código livre de chaves, pontos e vírgulas. Mas o custo disso é ter que aprender uma nova sintaxe e ter de reconstruir as suas stylesheets.

LESS abraça CSS, e qualquer funcionalidade adicional é integrada de tal forma a torná-la tão simples quanto possível. Assim, você pode mover o seu CSS gradualmente pro LESS, ou se você estiver interessado somente em utilizar variáveis, ou operações, você não é obrigado a aprender uma nova linguagem.

O parser do LESS é escrito usando TreeTop, um gerador de parsers PEG (Parsing expression grammar) escrito em Ruby (gramática do LESS em TreeTop).

As ferramentas do LESS e do Sass (compiladores, API) podem ser instaladas como gems e ser utilizadas a partir da linha de comando para a compilação, mas também podem ser utilizadas a partir de código Ruby.

No momento, o Sass está em vantagem no conjunto de funcionalidades. O LESS, por sua vez, permite migrar arquivos CSS existentes gradualmente para o LESS, em vez de ter de convertê-los completamente para o formato Sass. Nathan Weizenbaum, que mantém o Sass, mencionou em um post recente no blog sobre LESS vs Sass que no futuro, o Sass vai oferecer a opção de utilizar chaves em vez de indentação para aninhamento, assim como CSS, ou o LESS.

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

Dê sua opinião

Conteúdo educacional

Feedback geral
Bugs
Publicidade
Editorial
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2014 C4Media Inc.
Política de privacidade
BT