Функции во SASS

Во оваа лекција ќе разгледаме како да користиме функции. Функциите, на нешто личат на миксините, но во исто време дозволуваат да се додаваат параметри, кои можат да ги менуваат своите вредности.

Ајде да направиме функција func, која ќе ја постави големината на фонтот. Нека големината се пренесува како параметар и како параметар нека биде променлива:

styles.scss$font-size: 10px;

Потоа пишуваме во функцијата параметар $n и задолжително го означуваме во телото на функцијата @return:

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

Резултат на компајлирање:

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

Исто така, во функцијата може да се пренесе именуван аргумент. Ајде да ги преработиме условите од претходниот пример:

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

И во датотеката styles.css ќе го видиме истиот код:

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