Funkce v SASS

V této lekci se podíváme na to, jak používat funkce. Funkce jsou něčím podobné mixinům, ale zároveň umožňují přidávat parametry, které mohou měnit své hodnoty.

Vytvořme funkci func, která bude nastavovat velikost písma. Nechť je velikost předána parametrem a jako parametr bude působit proměnná:

styles.scss$font-size: 10px;

Poté do funkce zapíšeme parametr $n a nezapomeňme v těle funkce uvést @return:

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

Výsledek kompilace:

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

Do funkce lze také předat pojmenovaný argument. Přepišme podmínky předchozího příkladu:

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

A v souboru styles.css uvidíme stejný kód:

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