Sass — Директиви функцій

Від автора: у цій главі ми розглянемо Директиви функцій. У SASS ви можете створити власну функцію і використовувати її в контексті скрипта або застосувати будь-яке значення. Функції викликаються через ім’я функції з будь-якими параметрами.

У наступному прикладі продемонстровано використання директиви функції у файлі SCSS: function_directive.htm

Nested Rules

Потім створіть файл style.scss.

$first-width: 5px;
$second-width: 5px;
@function adjust_width($n) {
@return $n * $first-width + ($n – 1) * $second-width;
}
#set_width { padding-left: adjust_width(10); }

За допомогою наступної команди ви можете вказати SASS переглядати файл і оновлювати CSS кожен раз, коли змінюється файл SASS:

sass –watch C:\ruby\lib\sass\style.scss:style.css

Потім виконайте наведену вище команду; вона автоматично створить файл style.css з наступним кодом:

#set_width {
padding-left: 95px;
}

Результат на виході

Давайте виконаємо наступні дії, щоб побачити, як працює наведений вище код:

Директиви функцій Sass

Ви можете бачити, що при виведенні застосовується відступ зліва. Так само, як і міксин, функція може звертатися до глобально певним змінним і приймати параметри. Вам потрібно викликати для функції значення, що повертається через @return. Ми можемо викликати визначену в SASS функцію, використовуючи параметри ключових слів. Викличте цю функцію, як показано нижче.

#set_width { padding-left: adjust_width($n: 10); }

Конвенція імен

Щоб уникнути конфліктів імен, імена функцій можуть задаватися з префіксом, щоб їх можна було легко диференціювати. Подібно миксинам, обумовленими користувачем функціями також підтримуються аргументи змінних. У функціях та інших ідентифікаторах SASS взаємозамінними можуть використовувати символи підкреслення (_) і дефіс (-). Наприклад, якщо функція визначена з ім’ям adjust_width, її можна використовувати і як adjust-width, і навпаки.