Funktioner i SASS

I denne lektion vil vi se på, hvordan man bruger funktioner. Funktioner ligner på en måde mixins, men tillader at tilføje parametre, der kan ændre deres værdier.

Lad os lave en funktion func, som vil indstille skriftstørrelsen. Lad størrelsen blive sendt som en parameter, og parameteren vil være en variabel:

styles.scss$font-size: 10px;

Derefter angiver vi parameteren $n i funktionen og angiver obligatorisk i funktionens krop @return:

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

Kompileringsresultat:

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

Man kan også sende et navngivet argument til funktionen. Lad os omskrive betingelserne fra det foregående eksempel:

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

Og i filen styles.css vil vi se den samme kode:

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