Qual'é a diferença entre SCSS e Sass?

Sass é um pré-processador de CSS com avanços de sintaxe. As folhas de estilo na sintaxe avançada são processadas pelo programa, e transformadas em folhas de estilo CSS regulares. No entanto, elas não estendem o próprio padrão CSS.

As variáveis CSS são suportadas e podem ser utilizadas, mas não tão bem como as variáveis do pré-processador.

A diferença entre SCSS e Sass, este texto na página de documentação Sass deve responder à pergunta:

Há duas sintaxes disponíveis para o Sass. A primeira, conhecida como SCSS (Sassy CSS) e utilizada ao longo desta referência, é uma extensão da sintaxe do CSS. Isto significa que cada folha de estilo válida do CSS é um arquivo SCSS válido com o mesmo significado. Esta sintaxe é melhorada com as características do Sass descritas abaixo. Os arquivos que usam esta sintaxe têm a extensão **.scss***.

A segunda e sintaxe mais antiga, conhecida como sintaxe indentada (ou por vezes apenas "Sass"), proporciona uma forma mais concisa de escrever CSS. Ele usa indentação ao invés de parênteses para indicar o agrupamento de seletores, e novas linhas ao invés de ponto-e-vírgula para separar propriedades. Arquivos usando esta sintaxe têm a extensão **.sass***.

Contudo, tudo isto funciona apenas com o pré-compilador Sass que, no final, cria o CSS. Ele não é uma extensão do próprio padrão CSS.

Eu sou um dos criadores que ajudou a criar o Sass.

A diferença é a UI. Por baixo do exterior textual são idênticos. É por isso que os arquivos sass e scss podem importar um ao outro. Na verdade, o Sass tem quatro analisadores de sintaxe: scss, sass, CSS, e menos. Todos eles convertem uma sintaxe diferente em uma Árvore de Sintaxe Abstrata que é processada posteriormente na saída do CSS ou mesmo em um dos outros formatos através da ferramenta sass-convert.

Use a sintaxe que você mais gosta, ambas são totalmente suportadas e você pode mudar entre elas mais tarde se você mudar de idéia.

A partir da página inicial do idioma

Sass tem duas sintaxes. O novo principal sintaxe (a partir de Sass 3) é conhecida como "SCSS" (para "Sassy CSS"), e é um superconjunto da sintaxe do CSS3. Isto significa que todas as folhas de estilo válidas do CSS3 são SCSS válido também. Os arquivos SCSS utilizam o extensão .scss.

A segunda sintaxe, mais antiga, é conhecida como a sintaxe indentada (ou apenas "Sass"). inspirado pela concisão do Haml, é destinado a pessoas que preferem concisão sobre similaridade com o CSS. em vez de parênteses e ponto e vírgula usa o recuo de linhas para especificar blocos. Embora já não seja mais o sintaxe primária, a sintaxe indentada continuará a ser apoiado. Arquivos na sintaxe indentada use a extensão .sass.

SASS é uma linguagem interpretada que cospe CSS. A estrutura do Sass precia como CSS (remotamente), mas parece-me que a descrição é um pouco enganadora; é não um substituto para o CSS, ou uma extensão. É um intérprete que cospe CSS no final, então Sass ainda tem as limitações do CSS normal, mas os mascara com código simples.