Funktiot SASS:ssa

Tässä oppitunnissa tarkastelemme, kuinka funktioita käytetään. Funktiot muistuttavat jossain määrin sekoituksia, mutta ne mahdollistavat parametrien lisäämisen, jotka voivat muuttaa arvojaan.

Tehdään funktio func, joka asettaa fontin koon. Olkoon koko parametrina välitetty ja parametrina toimii muuttuja:

styles.scss$font-size: 10px;

Sen jälkeen määritellään funktiolle parametri $n ja funktion sisällä on pakollisesti @return:

styles.scss@function func($n) {
  @return $n * $font-size;
}
#main {
  font-size: func(2);
}

Kokoamisen tulos:

styles.css#main {
  font-size: 20px;
}

Funktiolle voidaan myös välittää nimetty argumentti. Kirjoitetaan edellisen esimerkin ehdot uudelleen:

styles.scss@function func($n) {
  @return $n * $font-size;
}
#main {
  font-size: func($n: 2);
}

Ja tiedostossa styles.css näemme saman koodin:

styles.css#main {
  font-size: 20px;
}

styles.scss$size: 10px;
@function func($num) {
  @return $num + $size;
}
div {
  font-size: func(4);
}

styles.scss$size: 4px;
@function func($num) {
  @return $num + $size;
}
.card {
  padding: func(2);
  margin: func(6);
  width: func(416);
}

styles.scss$size: 2px;

@function func($num) {
  @return ($num * $size) + 20;
}

.logo {
  width: func(2);
  height: func(4);
}