Функции в SASS

В този урок ще разгледаме как се използват функции. Функциите донякъде приличат на примеси, но в същото време позволяват добавяне на параметри, които могат да променят стойностите си.

Нека направим функция func, която ще задава размера на шрифта. Нека размерът се предава като параметър и като параметър да действа променлива:

$font-size: 10px;

След това задаваме параметъра във функцията $n и задължително посочваме в тялото на функцията @return:

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

Резултат от компилацията:

#main {
	font-size: 20px;
}

Освен това във функцията може да се предаде именуван аргумент. Нека пренапишем условията от предишния пример:

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

И във файла styles.css ще видим същия код:

#main {
	font-size: 20px;
}

Разкажете какъв ще бъде резултатът от компилацията на следния код:

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

Разкажете какъв ще бъде резултатът от компилацията на следния код:

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

Разкажете какъв ще бъде резултатът от компилацията на следния код:

$size: 2px;

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

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