Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Sass-syntaksin Ymmärtäminen Paremman CSS:n Saavuttamiseksi | CSS-Esiprosessorit ja Sass
Edistyneet CSS-tekniikat

bookSass-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:

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookSass-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:

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 2
some-alt