BT

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.

Avalie esse artigo

Relevância
Estilo/Redação

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
Feedback geral
Bugs
Publicidade
Editorial
Marketing
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2016 C4Media Inc.
Política de privacidade
BT

We notice you’re using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.