От автора: встроенная функция if(), возвращает только один результат из двух возможных, основываясь на заданном условии. Результат Sass функции можно связать с переменной, которую не нужно определять отдельно или использовать для дальнейших вычислений.
Синтаксис
1 |
if( выражение, значение1, значение2 ) |
Пример
В следующем примере продемонстрировано использование функции if() в файле SCSS:
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title>Control Directives & Expressions</title> <link rel = "stylesheet" type = "text/css" href = "style.css"/> </head> <body> <h2>Welcome to TutorialsPoint</h2> </body> </html> |
Затем создайте файл style.scss.
1 2 3 |
h2 { color: if( 1 + 1 == 2 , green , red); } |
С помощью следующей команды вы можете указать SASS просматривать файл и обновлять CSS каждый раз, когда изменяется файл SASS:
1 |
sass --watch C:\ruby\lib\sass\style.scss:style.css |
Затем выполните приведенную выше команду; она автоматически создаст файл style.css со следующим кодом:
1 2 3 |
h2 { color: green; } |
Результат на выходе
Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше HTML-код в файле if_function.html.
Откройте этот HTML-файл в браузере, вы должны увидеть следующее:
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.