PreprocessadoresPré-processadores de CSS3 são linguagens com o propositopropósito de ajudar na criação de estilos compatíveis com todos os navegadores e com diversos recursos para nos ajudar, principalmente quando temos CSSCSS's enormes.
O mais importante é reconhecer a sintaxsintaxe, e para nossa sorte todos esses pré-processadores usam uma linguagem semelhante entre si.
Sass e LESS
Ambos usam sintaxsintaxe 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
.less,
O codigocó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 Embora este ainda estáesteja por aí, é velho e não poderá usá-lo para além deste exemplo. A
A sintaxe usa a extensão de arquivo .sass.sass
e se parece com isto:
/* style.sass */
h1
color: #0565CC
Stylus
A sintaxe para Stylus é muito mais detalhadodetalhada. Usando a extensão do arquivo .Style.style
,
Stylus 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
UsandoUsar 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 tecnicas,técnicas você não precisará escrever a mesma cor ou padrão variasvárias vezes, utilizando variaveisvariáveis você consegue diminuir e simplificar muito seu codigocódigo.
Não vejo vantagem em usar uma tecnicatécnica X em relação a Y, vai do gosto do programador. Mas
Mas uma coisa sem sombra de duvidasdúvidas é o ganho em relação a organização do codigocódigo, como você monta seu CSS e trabalha nele.