Para começar a escrever código sass, é necessário criar um arquivo com a extensão .scss. (por exemplo, feature.scss).

Vamos analisar a sintaxe do sass utilizando o seguinte código css. Manipularemos o botão que terá um efeito de hover. Escrevemos o código css para isso:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Vamos reescrever o mesmo código utilizando a sintaxe do sass:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

A diferença é que utilizamos estilos para um elemento dentro do primeiro par de chaves {}. Além disso, não utilizamos o nome da classe do elemento duas vezes. Utilizamos o símbolo comercial (&) em seu lugar.

Nota

Em caso de dúvidas ou dificuldades com algum recurso do sass, é altamente recomendado utilizar a documentação do sass.

Compilação

Os navegadores não compreendem a sintaxe de pré-processadores. Eles entendem apenas as sintaxes de html, css e javascript. Então, como funciona? É necessário compilar o arquivo sass para um arquivo css. Após a compilação, será possível visualizar o resultado.

Existem as seguintes opções para compilar Sass em CSS:

• Utilizar a extensão do Visual Studio Code - Live Sass Compiler;
• Utilizar o aplicativo - Scout App.