Funkcije v SASS

V tej lekciji bomo preučili, kako uporabljati funkcije. Funkcije so nekoliko podobne mešanjem, vendar omogočajo dodajanje parametrov, ki lahko spreminjajo svoje vrednosti.

Ustvarimo funkcijo func, ki bo nastavila velikost pisave. Naj bo velikost posredovana kot parameter in kot parameter naj bo spremenljivka:

styles.scss$font-size: 10px;

Nato v funkciji določimo parameter $n in v telesu funkcije obvezno navedemo @return:

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

Rezultat prevajanja:

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

V funkcijo lahko podamo tudi poimenovani argument. Prepišimo pogoje iz prejšnjega primerja:

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

In v datoteki styles.css bomo videli enako kodo:

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