# Функции в 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); }`
←→
↑