Funkcijos SASS

Šioje pamokoje mes apžvelgsime, kaip naudoti funkcijas. Funkcijos yra šiek tiek panašios į maišymą, bet leidžia pridėti parametrus, kurie gali keisti savo reikšmes.

Sukurkime funkciją func, kuri nustatys šrifto dydį. Tegul dydis perduodamas parametru ir kaip parametras veiks kintamasis:

styles.scss$font-size: 10px;

Tada funkcijoje nurodome parametrą $n ir būtinai nurodome funkcijos kūne @return:

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

Kompiliavimo rezultatas:

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

Taip pat į funkciją galima perduoti pavadintą argumentą. Perrašykime ankstesnio pavyzdžio sąlygas:

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

Ir faile styles.css pamatysime tą patį 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);
}