Функције у 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);
}