Introdução à linguagem SASS

Neste tutorial, estudaremos o pré-processador SASS. SASS é uma alternativa ao pré-processador LESS, que também permite programar em CSS.

Na verdade, o SASS tem duas variantes de sintaxe, a primeira também é chamada de SASS, e a segunda é SCSS. Ambos suportam o mesmo conjunto de funcionalidades e diferem apenas ligeiramente na sintaxe. No entanto, como o SCSS é mais novo e amplamente utilizado, neste tutorial estudaremos especificamente ele.

Assim, a sintaxe SCSS é semelhante à sintaxe CSS, ou seja, veremos as mesmas chaves e as mesmas aspas com ponto e vírgula que no CSS. Vejamos um exemplo de sintaxe SCSS, onde primeiro atribuímos a variáveis a fonte e a cor, e depois atribuímos essas variáveis às propriedades no seletor body:

styles.scss$font: Helvetica, sans-serif;
$color: #333;

body {
  font: $font;
  color: $color;
}