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