Функции в 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);
}