Sass — Функція if()

13

Від автора: вбудована функція if () повертає тільки один результат з двох можливих, грунтуючись на заданому умові. Результат Sass функції можна пов’язати з змінної, яку не потрібно визначати окремо або використовувати для подальших обчислень.

Синтаксис

if( вираз, значення1, значення2 )

Приклад

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

Control Directives & Expressions

Welcome to TutorialsPoint

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

h2 {
color: if( 1 + 1 == 2 , green , red);
}

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

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

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

h2 {
color: green;
}

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

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

Збережіть наведений вище HTML-код у файлі if_function.html.

Відкрийте HTML-файл у браузері, ви повинні побачити наступне:

Sass — Функція if()