Funksies in SASS

In hierdie les sal ons kyk hoe om funksies te gebruik. Funksies is ietwat soortgelyk aan mixins, maar laat tog toe om parameters by te voeg, wat hul waardes kan verander.

Kom ons maak 'n funksie func wat die fontgrootte sal stel. Laat die grootte as 'n parameter oorgedra word en laat die parameter 'n veranderlike wees:

styles.scss$font-size: 10px;

Sit dan die parameter in die funksie $n en spesifiseer noodwendig in die funksieliggaam @return:

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

Kompilasieresultaat:

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

Jy kan ook 'n benoemde argument na die funksie stuur. Herrskryf die voorwaardes van die vorige voorbeeld:

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

En in die lêer styles.css sal ons dieselfde kode sien:

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