Forståelse af Sass-syntaks for Bedre CSS

For at begynde at skrive sass-kode, skal vi oprette en fil med filendelsen .scss. (f.eks. feature.scss).

Lad os se på sass-syntaksen med følgende css-kode. Vi vil manipulere knappen, som får en hover-effekt. Vi skriver css-kode for den:

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

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

Lad os omskrive den samme kode til sass-syntaks:

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

Forskellen er, at vi anvender stilarter for ét element inden for det første sæt {}-klammer. Vi bruger heller ikke elementets klassenavn to gange. I stedet anvender vi et og-tegn (&).

Bemærk

Hvis der opstår spørgsmål eller uklarheder om nogle sass-funktioner, anbefales det kraftigt at benytte sass dokumentation.

Kompilering

Browsere forstår ikke preprocessor-syntaks. De forstår kun html-, css- og javascript-syntaks. Hvordan fungerer det så? Vi skal kompilere sass-filen til en css-fil. Efter kompilering vil vi se resultatet.

Der findes følgende muligheder for at kompilere sass til css:

• Brug Visual Studio Code-udvidelsen - Live Sass Compiler;
• Brug applikationen - Scout App.