Per iniziare a scrivere codice sass, è necessario creare un file con estensione .scss (ad esempio, feature.scss).

Consideriamo la sintassi sass sul seguente codice css. Manipoleremo il pulsante che avrà un effetto hover. Scriviamo il codice css per esso:

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

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

Riscriviamo lo stesso codice utilizzando la sintassi sass:

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

La differenza è che utilizziamo gli stili per un elemento all'interno della prima coppia di parentesi graffe {}. Inoltre, non utilizziamo due volte il nome della classe dell'elemento. Usiamo invece il simbolo ampersand (&).

Nota

In caso di domande o incomprensioni su alcune funzionalità di sass, si consiglia vivamente di consultare la documentazione sass.

Compilazione

I browser non comprendono la sintassi dei preprocessori. Comprendono solo la sintassi di html, css e javascript. Quindi, come funziona? È necessario compilare il file sass in un file css. Dopo la compilazione, sarà possibile vedere il risultato.

Sono disponibili le seguenti opzioni per compilare sass in css:

• Utilizzo dell'estensione Visual Studio Code - Live Sass Compiler;
• Utilizzo dell'applicazione - Scout App.