Om sass-code te schrijven, moet een bestand met de extensie .scss worden aangemaakt (bijvoorbeeld feature.scss).

Laten we de sass-syntaxis bekijken aan de hand van de volgende css-code. We passen een knop aan die een hover-effect krijgt. We schrijven hiervoor de css-code:

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

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

Laten we dezelfde code herschrijven in sass-syntaxis:

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

Het verschil is dat stijlen voor één element binnen het eerste paar {}-haken worden geplaatst. Ook wordt de elementklasse niet tweemaal gebruikt. In plaats daarvan wordt het ampersand-teken (&) gebruikt.

Opmerking

Bij vragen of onduidelijkheden over bepaalde sass-functionaliteiten wordt sterk aanbevolen om de sass documentatie te raadplegen.

Compilatie

Browsers begrijpen de preprocessor-syntaxis niet. Alleen html-, css- en javascript-syntaxis wordt ondersteund. Hoe werkt het dan? Het sass-bestand moet worden gecompileerd naar een css-bestand. Na compilatie is het resultaat zichtbaar.

Er zijn de volgende opties om Sass naar CSS te compileren:

• Gebruik de Visual Studio Code-extensie - Live Sass Compiler;
• Gebruik de applicatie - Scout App.