Funkcijas SASS

Šajā nodarbībā mēs apskatīsim, kā izmantot funkcijas. Funkcijas ir nedaudz līdzīgas mixin, bet tajā pašā laikā tās ļauj pievienot parametrus, kas var mainīt savas vērtības.

Izveidosim funkciju func, kas iestatīs fonta lielumu. Ļaujiet lielumam tikt nodotam kā parametrs un kā parametrs darbojas mainīgais:

styles.scss$font-size: 10px;

Tad funkcijā norādām parametru $n un obligāti norāda funkcijas ķermenī @return:

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

Kompilācijas rezultāts:

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

Arī funkcijai var nodot nosaukto argumentu. Pārrakstīsim iepriekšējā piemēra nosacījumus:

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

Un failā styles.css mēs redzēsim to pašu kodu:

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