Forstå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:
- Bruk Visual Studio Code-utvidelsen - Live Sass Compiler;
- Bruk applikasjonen - Scout App.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
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
Forstå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:
- Bruk Visual Studio Code-utvidelsen - Live Sass Compiler;
- Bruk applikasjonen - Scout App.
Takk for tilbakemeldingene dine!