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.