Funkcie v SASS

V tejto lekcii sa pozrieme na to, ako používať funkcie. Funkcie sú sčasti podobné mixinom, ale zároveň umožňujú pridávať parametre, ktoré môžu meniť svoje hodnoty.

Vytvorme funkciu func, ktorá bude nastavovať veľkosť písma. Nech je veľkosť odovzdaná parametrom a ako parameter nech vystupuje premenná:

styles.scss$font-size: 10px;

Potom v funkcii zapíšeme parameter $n a povinne uvedieme v tele funkcie @return:

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

Výsledok kompilácie:

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

Do funkcie je možné odovzdať aj pomenovaný argument. Prepíšme podmienky predchádzajúceho príkladu:

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

A v súbore styles.css uvidíme rovnaký kód:

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