SASS-də Funksiyalar

Bu dərsdə biz funksiyalardan necə istifadə edəcəyimizi nəzərdən keçirəcəyik. Funksiyalar qismən mixinlərə bənzəyir, lakin eyni zamanda dəyərlərini dəyişə bilən parametrlər əlavə etməyə imkan verir.

Gəlin yazı ölçüsünü təyin edəcək func funksiyasını edək. Ölçü parametr kimi ötürülsün və parametr kimi dəyişən iştirak etsin:

styles.scss$font-size: 10px;

Sonra funksiyaya $n parametrini yazırıq və mütləq funksiyanın gövdəsində @return göstəririk:

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

Kompilyasiya nəticəsi:

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

Həmçinin funksiyaya adlandırılmış arqument ötürülə bilər. Əvvəlki nümunənin şərtlərini yenidən yazaq:

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

Və styles.css faylında biz eyni kodu görəcəyik:

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