Johdatus SASS-kieleen

Tässä oppaassa opimme SASS-esiprosessoria. SASS on vaihtoehto LESS-esiprosessorille, joka myös mahdollistaa ohjelmoinnin CSS:llä.

Itse asiassa SASS:lla on kaksi syntaksivaihtoehtoa, ensimmäistä vaihtoehtoa kutsutaan myös SASS:ksi ja toista SCSS:ksi. Molemmat tukevat samaa toimintojoukkoa ja eroavat vain hieman syntaksiltaan. Koska SCSS on kuitenkin uudempi ja laajemmin käytetty, opimme tässä oppaassa nimenomaan sitä.

Eli SCSS-syntaksi muistuttaa CSS-syntaksia, eli näemme samat aaltosulkeet ja lainausmerkit pilkuilla kuin CSS:ssä. Tarkastellaan esimerkkiä SCSS-syntaksista, missä annamme muuttujille fontin ja värin, minkä jälkeen annamme nämä muuttujat ominaisuuksille body-valitsimessa:

styles.scss$font: Helvetica, sans-serif;
$color: #333;

body {
  font: $font;
  color: $color;
}