Pré-processadores de CSS3 são linguagens com o propósito de ajudar
na criação de estilos compatíveis com todos os navegadores e com diversos
recursos para nos ajudar, principalmente quando temos CSS's enormes.
O mais importante é reconhecer a sintaxe, e para nossa sorte todos esses pré-processadores usam uma linguagem semelhante entre si.
Sass e LESS
Ambos usam sintaxe padrão CSS e isso faz com que ele se torne muito fácil.
Sass usa a extensão .scss
e o LESS usa .less
.
O código abaixo funciona no Sass ou LESS.
/* style.scss or style.less */
h1 {
color: #0565CC;
}
É importante notar que Sass também tem uma sintaxe mais antiga, que omite ponto e vírgula e chaves. Embora este ainda esteja por aí, é velho e não poderá usá-lo para além deste exemplo.
A sintaxe usa a extensão de arquivo .sass
e se parece com isto:
/* style.sass */
h1
color: #0565CC
Stylus
A sintaxe para Stylus é muito mais detalhada. Usando a extensão do arquivo .style
, Stylus aceita a sintaxe CSS padrão, mas também aceita algumas outras variações,
dois pontos e ponto e vírgula são todos opcionais. Por exemplo:
/* style.styl */
h1 {
color: #0982C1;
}
/* omitor colchetes */
h1
color: #0982C1;
/* omitir dois pontos e virgular */
h1
color #0982C1
Usar diferentes variações do mesmo estilo também é válido, então o seguinte exemplo irá compilar sem erros:
h1 {
color #0982c1
}
h2
font-size: 1.2em
Cada um dos arquivos acima irá compilar para o mesmo CSS.
Você pode usar sua imaginação para ver o quão útil pode ser para seu projeto.
Com essas técnicas você não precisará escrever a mesma cor ou padrão várias vezes, utilizando variáveis você consegue diminuir e simplificar muito seu código.
Não vejo vantagem em usar uma técnica X em relação a Y, vai do gosto do programador.
Mas uma coisa sem sombra de dúvidas é o ganho em relação a organização do código, como você monta seu CSS e trabalha nele.
+1
- Existe uma outra pergunta que refere somente Sass e Less, acho que Stylus é um elemento de comparação importante.