Lære 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.

Var alt klart?

Tak for dine kommentarer!

Sektion 7. Kapitel 2

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain more about the ampersand (&) in Sass?

What are some other common features of Sass?

How do I choose between the different Sass compilers?

Awesome!

Completion rate improved to 2.04

Stryg for at vise menuen