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