Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Forståelse av Sass-syntaks for Bedre CSS | CSS-forprosessorer og Sass
Avanserte CSS-teknikker

bookForståelse av Sass-syntaks for Bedre CSS

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:

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 2

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookForståelse av Sass-syntaks for Bedre CSS

Sveip for å vise menyen

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:

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 2
some-alt