Sass introduktion

Dette er, hvad du skal vide

Før du fortsætter, bør du have en grundlæggende forståelse af følgende:

  • HTML
  • CSS

Hvis du vil lære disse emner først, kan du besøge vores Hjemmeside Besøg disse undervisningsmaterialer.

Hvad er Sass?

  • Sass refererer til Syntactically Awesome Stylesheet (en stilark med fantastisk syntaks)
  • Sass er en CSS-udvidelse
  • Sass er en CSS-forbehandler
  • Sass er kompatibel med alle versioner af CSS
  • Sass reducerer gentagelser i CSS, hvilket sparer tid
  • Sass blev designet af Hampton Catlin og udviklet af Natalie Weizenbaum i 2006
  • Sass kan downloades og bruges gratis

Hvorfor bruge Sass?

Stilarkene bliver større og mere komplekse, og det bliver også sværere at vedligeholde. Dette er et sted, hvor en CSS-forbehandler kan hjælpe.

Sass giver dig mulighed for at bruge egenskaber, der ikke findes i CSS, såsom variabler, indlejrede regler, mixin, import, arv, indbyggede funktioner og andre funktioner.

En simpel og nyttig Sass-eksempel

Antag, at vi har en hjemmeside med tre hovedfarver:

#a2b9bc
#b2ad7f
#878f99

Så hvor mange gange skal du indtaste disse HEX-værdier? Mange gange. Hvis den samme farve ændres, hvad så?

Du kan skrive følgende kode i Sass i stedet for at indtaste værdierne flere gange:

Sass eksempel

/* Definerer variabler for oprindelige farver */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Brug af variabler */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Så, når du bruger Sass, hvis den oprindelige farve ændres, skal du kun ændre den et sted.

Hvordan virker Sass?

Browseren forstår ikke Sass-koden. Derfor har du brug for en Sass forhåndskommerciel til at konvertere Sass-koden til standard CSS.

Dette proces kaldes translation (transpiling). Så skal du give Sass-koden til translation (et program), og derefter hente CSS-koden tilbage.

Tip:Translation er et udtryk, der bruges til at konvertere/kildekoden fra et sprog til et andet sprog.

Sass filtype

Filudvidelsen for Sass-filer er ".scss".

Sass kommentarer

Sass understøtter standard CSS kommentarer /* comment */，derudover understøtter også inline kommentarer // comment:

Sass eksempel

/* Definerer hovedfarver */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Brug af variabler */
.main-header {
  background-color: $primary_1; // Du kan tilføje kommentarer her
}