[Dúvida] SASS e SCSS

Olá, Leticia!

Entendo sua confusão, mas não se preocupe, vamos esclarecer isso.

SASS (Syntactically Awesome Stylesheets) é uma linguagem de pré-processamento de CSS. Ele vem em duas sintaxes diferentes: SASS (indentation-based) e SCSS (block-based).

1. SASS: Esta é a sintaxe original, também conhecida como sintaxe indented. Ela é semelhante ao Haml (uma linguagem de marcação leve) e não usa chaves para delimitar blocos, nem ponto e vírgula para separar as regras. Aqui está um exemplo de como seria um código em SASS:

body
  background: #000
  color: #fff

1. SCSS: Também conhecida como Sassy CSS. É mais semelhante ao CSS tradicional, usa chaves para delimitar blocos e ponto e vírgula para separar as regras. Aqui está um exemplo de como seria um código em SCSS:

body {
  background: #000;
  color: #fff;
}

Em resumo, ao criarmos um arquivo .scss, estamos adotando a sintaxe mais moderna do SASS, que se assemelha à escrita do CSS tradicional. SASS é tanto o termo utilizado para se referir ao pré-processador em geral quanto ao nome da extensão. Nas aulas, vamos aprender SASS, utilizando o arquivo com extensão .scss e a sintaxe mais moderna, a título de curiosidade deixo a documentação a respeito das diferenças dos dois formatos.

• Documentação do SASS

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!