São duas sintaxes diferentes do SASS com as mesmas funcionalidades. O SASS era originalmente a sintaxe oficial e ela é um pouco diferente da sintaxe do CSS, sem chaves e pontos e virgulas. A sintaxe SCSS agora é a oficial e é mais parecida com a sintaxe do CSS. Na prática a escolha entre as duas é uma questão de gosto. Olhe abaixo um exemplo da sintaxe SASS e outro da sintaxe SCSS
Exemplo da Sintaxe SASS:
#main
color: blue
font-size: 0.3em
a
font:
weight: bold
family: serif
&:hover
background-color: #eee
Exemplo da Sintaxe SCSS:
#main {
color: blue;
font-size: 0.3em;
a {
font: {
weight: bold;
family: serif;
}
&:hover {
background-color: #eee;
}
}
}
Esses códigos são na realidade a mesma coisa só que em sintaxes diferentes. Perceba que usando SASS o que conta é a identação, não existem chaves nem pontos e virgulas. Já usando SCSS tudo fica muito parecido com CSS, você tem chaves e pontos e virgulas. Mas perceba que as funcionalidades do SASS como nesting existem nas duas sintaxes.