Introdução ao Sass

O Sass é um pré-processador de CSS. Pré-processadores ajudam a escrever folhas de estilo com uma hierarquia mais fácil de identificar, e por isso usá-los ao invés de escrever CSS nativo ajuda a tornar seus estilos mais fáceis de entender e manter. Eles também tem muitas outras vantagens que você vai conhecer nos próximos tutoriais. Esse é apenas o primeiro de uma série de tutoriais sobre Sass.

Os pré-processadores de CSS são chamados de transpilers, porque eles retornam CSS nativo usando um processo chamado de transpilação.

O Sass possui dois tipos de sintaxe: SCSS e Sass (também chamada de sintaxe indentada). O SCSS é uma extensão do próprio CSS, e por isso qualquer arquivo válido de CSS é também um arquivo válido de SCSS. Seus arquivos tem a extensão .scss. As duas sintaxes serão mostradas, mas nos exemplos dos tutoriais vamos trabalhar apenas com a SCSS.

A sintaxe indentada não é uma extensão de CSS, então arquivos válidos de CSS não são válidos nessa sintaxe. Ela é parecida com a sintaxe do Python, porque ela usa apenas a indentação no lugar das chaves pra indicar blocos, e quebras de linha ao invés de ponto e vírgula pra definir propriedades. A extensão usada nessa sintaxe é a .sass.

É recomendado que você aprenda CSS antes de aprender Sass. Também é recomendado que você instale o Sass e teste os exemplos de cada tutorial para tirar melhor proveito deles.