Inzicht in Sass-Syntaxis voor Betere CSS
Om sass-code te schrijven, moet een bestand met de extensie .scss
worden aangemaakt (bijvoorbeeld feature.scss
).
Laten we de sass-syntaxis bekijken aan de hand van de volgende css-code. We passen een knop aan die een hover-effect krijgt. We schrijven hiervoor de css-code:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
}
.button:hover {
background-color: darkmagenta;
}
Laten we dezelfde code herschrijven in sass-syntaxis:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
&:hover {
background-color: darkmagenta;
}
}
Het verschil is dat stijlen voor één element binnen het eerste paar {}
-haken worden geplaatst. Ook wordt de elementklasse niet tweemaal gebruikt. In plaats daarvan wordt het ampersand-teken (&
) gebruikt.
Opmerking
Bij vragen of onduidelijkheden over bepaalde sass-functionaliteiten wordt sterk aanbevolen om de sass documentatie te raadplegen.
Compilatie
Browsers begrijpen de preprocessor-syntaxis niet. Alleen html-, css- en javascript-syntaxis wordt ondersteund. Hoe werkt het dan? Het sass-bestand moet worden gecompileerd naar een css-bestand. Na compilatie is het resultaat zichtbaar.
Er zijn de volgende opties om Sass naar CSS te compileren:
- Gebruik de Visual Studio Code-extensie - Live Sass Compiler;
- Gebruik de applicatie - Scout App.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Inzicht in Sass-Syntaxis voor Betere CSS
Veeg om het menu te tonen
Om sass-code te schrijven, moet een bestand met de extensie .scss
worden aangemaakt (bijvoorbeeld feature.scss
).
Laten we de sass-syntaxis bekijken aan de hand van de volgende css-code. We passen een knop aan die een hover-effect krijgt. We schrijven hiervoor de css-code:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
}
.button:hover {
background-color: darkmagenta;
}
Laten we dezelfde code herschrijven in sass-syntaxis:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
&:hover {
background-color: darkmagenta;
}
}
Het verschil is dat stijlen voor één element binnen het eerste paar {}
-haken worden geplaatst. Ook wordt de elementklasse niet tweemaal gebruikt. In plaats daarvan wordt het ampersand-teken (&
) gebruikt.
Opmerking
Bij vragen of onduidelijkheden over bepaalde sass-functionaliteiten wordt sterk aanbevolen om de sass documentatie te raadplegen.
Compilatie
Browsers begrijpen de preprocessor-syntaxis niet. Alleen html-, css- en javascript-syntaxis wordt ondersteund. Hoe werkt het dan? Het sass-bestand moet worden gecompileerd naar een css-bestand. Na compilatie is het resultaat zichtbaar.
Er zijn de volgende opties om Sass naar CSS te compileren:
- Gebruik de Visual Studio Code-extensie - Live Sass Compiler;
- Gebruik de applicatie - Scout App.
Bedankt voor je feedback!