Sass-syntaksin Ymmärtäminen Paremman CSS:n Saavuttamiseksi
Sass-koodin kirjoittaminen aloitetaan luomalla tiedosto, jonka tiedostopääte on .scss
. (esim. feature.scss
).
Tarkastellaan sass-syntaksia seuraavan css-koodin avulla. Muokataan painiketta, johon lisätään hover-efekti. Kirjoitetaan css-koodi sille:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
}
.button:hover {
background-color: darkmagenta;
}
Kirjoitetaan sama koodi sass-syntaksilla:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
&:hover {
background-color: darkmagenta;
}
}
Erona on, että käytämme yhden elementin tyylejä ensimmäisen {}
-sulkuparin sisällä. Lisäksi emme käytä elementin luokan nimeä kahdesti, vaan käytämme sen sijaan et-merkkiä (&
).
Huomio
Jos jokin sass-ominaisuus aiheuttaa kysymyksiä tai epäselvyyksiä, on erittäin suositeltavaa käyttää sass-dokumentaatiota.
Kääntäminen
Selaimet eivät ymmärrä esikäsittelijän syntaksia. Ne ymmärtävät vain html-, css- ja javascript-syntaksin. Miten tämä siis toimii? Sass-tiedosto täytyy kääntää css-tiedostoksi. Kääntämisen jälkeen näemme lopputuloksen.
Sassin kääntämiseen css:ksi on seuraavat vaihtoehdot:
- Käytä Visual Studio Code -laajennusta - Live Sass Compiler;
- Käytä sovellusta - Scout App.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Sass-syntaksin Ymmärtäminen Paremman CSS:n Saavuttamiseksi
Pyyhkäise näyttääksesi valikon
Sass-koodin kirjoittaminen aloitetaan luomalla tiedosto, jonka tiedostopääte on .scss
. (esim. feature.scss
).
Tarkastellaan sass-syntaksia seuraavan css-koodin avulla. Muokataan painiketta, johon lisätään hover-efekti. Kirjoitetaan css-koodi sille:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
}
.button:hover {
background-color: darkmagenta;
}
Kirjoitetaan sama koodi sass-syntaksilla:
.button {
font-size: 24px;
color: green;
background-color: rebeccapurple;
&:hover {
background-color: darkmagenta;
}
}
Erona on, että käytämme yhden elementin tyylejä ensimmäisen {}
-sulkuparin sisällä. Lisäksi emme käytä elementin luokan nimeä kahdesti, vaan käytämme sen sijaan et-merkkiä (&
).
Huomio
Jos jokin sass-ominaisuus aiheuttaa kysymyksiä tai epäselvyyksiä, on erittäin suositeltavaa käyttää sass-dokumentaatiota.
Kääntäminen
Selaimet eivät ymmärrä esikäsittelijän syntaksia. Ne ymmärtävät vain html-, css- ja javascript-syntaksin. Miten tämä siis toimii? Sass-tiedosto täytyy kääntää css-tiedostoksi. Kääntämisen jälkeen näemme lopputuloksen.
Sassin kääntämiseen css:ksi on seuraavat vaihtoehdot:
- Käytä Visual Studio Code -laajennusta - Live Sass Compiler;
- Käytä sovellusta - Scout App.
Kiitos palautteestasi!