For å begynne å skrive sass-kode, må vi opprette en fil med filendelsen .scss. (for eksempel feature.scss).

La oss se på sass-syntaksen med følgende css-kode. Vi skal manipulere en knapp som får en hover-effekt. Vi skriver css-kode for dette:

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

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

La oss skrive om den samme koden til sass-syntaks:

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

Forskjellen er at vi bruker stiler for ett element inne i det første paret med {}-klammer. Vi bruker heller ikke elementets klassenavn to ganger. I stedet bruker vi ampersand (&).

Merk

Ved spørsmål eller uklarheter om noen sass-funksjoner, anbefales det sterkt å bruke sass-dokumentasjonen.

Kompilering

Nettlesere forstår ikke preprosessor-syntaks. De forstår kun html-, css- og javascript-syntaks. Så, hvordan fungerer det? Vi må kompilere sass-filen til en css-fil. Etter kompilering vil vi se resultatet.

Følgende alternativer finnes for å kompilere sass til css:

• Bruk Visual Studio Code-utvidelsen - Live Sass Compiler;
• Bruk applikasjonen - Scout App.