Funksjoner i SASS

I denne leksjonen skal vi se på hvordan vi bruker funksjoner. Funksjoner ligner på mikser på en måte, men gjør det mulig å legge til parametere, som kan endre sine verdier.

La oss lage en funksjon func som vil sette skriftstørrelsen. La størrelsen bli sendt som en parameter og la parameteren være en variabel:

styles.scss$font-size: 10px;

Deretter skriver vi inn parameteren i funksjonen $n og må angi @return i funksjonens kropp:

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

Kompileringsresultat:

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

Vi kan også sende et navngitt argument til funksjonen. La oss omskrive betingelsene fra forrige 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 koden:

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