Funkcije u SASS-u

U ovoj lekciji ćemo razmotriti kako da koristimo funkcije. Funkcije su donekle slične mešanjima (mixin), ali omogućavaju dodavanje parametara koji mogu da menjaju svoje vrednosti.

Hajde da napravimo funkciju func koja će podesiti veličinu fonta. Neka se veličina prosledi kao parametar i neka parametar bude promenljiva:

styles.scss$font-size: 10px;

Zatim u funkciji definišemo parametar $n i obavezno navedemo u telu funkcije @return:

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

Rezultat kompilacije:

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

Takođe, funkciji se može proslediti imenovani argument. Prepisaćemo uslove iz prethodnog primer:

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

I u fajlu styles.css videćemo isti taj kod:

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);
}