Sass

Tämä artikkeli kertoo tyylisivujen kielestä. Suvusta kertoo Sass.

Sass on tyylisivujen kieli, joka käännetään CSS-tyylisivuiksi. Sass mahdollistaa muun muassa muuttujien ja funktioiden käytön.

Sass-esikääntäjä tuottaa CSS-määrittelyjä koodista, joka voidaan antaa Sassy CSS (SCSS) -syntaksilla.

Historia

Sassin kehitti alun perin Hampton Catlin, joka kehitti Nathan Weizenbaumin kanssa versiot 2.0:aan saakka. Chris Eppstein liittyi kehitykseen vuonna 2008. Ensimmäiset versiot Sass-esikääntäjästä oli toteutettu Ruby-kielellä, mutta vuonna 2016 se toteutettiin uudelleen Dart-kielellä.

Esimerkki

Sass-määrittely:

#header
  color: red
  @media (min-width: 400px)
    color: blue

Kääntyy seuraavaksi CSS-määrittelyksi:

#header {
  color: red;
}
@media (min-width: 400px){
  #header {
    color: blue;
  }
}

SCSS-määrittely:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

SASS-määrittely:

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

Kääntyvät CSS-määrittelyksi:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Lähteet

  1. ↑ Documentation sass-lang.com. Viitattu 3.2.2025. (englanniksi)
  2. ↑ Complexity Metrics for Sassy Cascading Style Sheets (PDF) bjmc.lu.lv. Viitattu 3.2.2025. (englanniksi)
  3. ↑ About Arkistoitu Viitattu 3.2.2025. (englanniksi)
  4. ↑ Jouviane Alexandre: What is Sass? An Introduction to The World’s Most Popular CSS Preprocessor skillcrush.com. Viitattu 3.2.2025. (englanniksi)

Aiheesta muualla