Diferenças entre SCSS e SASS, qual utilizar?

Neste artigo você vai aprender quais são as diferenças entre SCSS e SASS, qual optar e quando utilizar cada uma delas

Fala programador(a), beleza? Bora aprender mais sobre SCSS e SASS

Principais características do SASS

Vamos começar primeiramente com SASS, que é um pré-processador

Tem uma sintaxe sem as clássicas chaves do CSS, e todo o código gerado em SASS deve ser transformado em CSS posteriormente, só assim poderemos aproveitar este código, navegadores não leem arquivos .sass

Exemplo de código em SASS:

$color: red

.container
  background-color: $color

Também não utilizamos ponto e vírgula no SASS e os arquivos tem a extensão de .sass

A identação das linhas em SASS deve ser seguida a risca, a cada regra devemos dar um tab no estilo a ser aplicado, conforme exemplo acima

Em ambos, SCSS e SASS, obteremos várias vantagens que o CSS não possui:

• Variáiveis com escopo global e local;
• Mixins;
• Funções;
• Herança;
• Operadores condicionais e de repetição;
• E muito mais!

Principais características do SCSS

Também é um pré-processador, porém possui diversas diferenças na sintaxe, que é muita parecida da sintaxe do CSS

Temos a obrigatoriedade da utilização de chaves e também de ponto e vírgula a cada instrução

Veja o primeiro exemplo, agora em SCSS:

$color: red;

.container {
  background-color: $color
}

Veja que adicionamos as chaves e também o ;

Lembrando que tanto a sintaxe do SASS quanto a de SCSS fazem parte do SASS, o SCSS também precisa ser compilado em CSS para que possa ser utilizado nos navegadores

Ou seja, navegadores não leem arquivos .scss, que é a extensão utilizada por esta sintaxe

O SCSS também não exige uma identação rígida, como no CSS

Podemos entender então que SCSS e SASS são duas sintaxes diferentes de escrever CSS com super poderes, e devem ser compilados em CSS para serem válidos, ambas as sintaxes fazem parte do SASS

Conclusão

Neste artigo você aprendeu as diferenças entre SCSS e SASS

Ambas abordagens possuem diferenças nas sintaxes, mas os recursos diferenciais do CSS existem em ambas

Você pode optar por qual lhe agradar mais, e após isso utilizar o processador do SASS para converter o arquivo em CSS válido e otimizado

E então utilizar este resultado final em seus projetos web

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube