Funkcje w SASS

W tej lekcji przyjrzymy się, jak używać funkcji. Funkcje są w pewnym sensie podobne do mixinów, ale pozwalają na dodawanie parametrów, które mogą zmieniać swoje wartości.

Stwórzmy funkcję func, która będzie ustawiać rozmiar czcionki. Niech rozmiar będzie przekazywany parametrem i jako parametr niech będzie zmienna:

$font-size: 10px;

Następnie zapisujemy w funkcji parametr $n i obowiązkowo wskazujemy w ciele funkcji @return:

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

Wynik kompilacji:

#main {
	font-size: 20px;
}

Do funkcji można również przekazać nazwany argument. Przepiszmy warunki z poprzedniego przykładu:

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

W pliku styles.css zobaczymy ten sam kod:

#main {
	font-size: 20px;
}

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}