Sass if()函数
描述
基于条件,此内置的 if()函数仅返回两个可能结果中的一个结果。函数的结果可以参考可能未被定义的变量或具有进一步的计算。
句法
if( expression, value1, value2 )
例子
以下示例演示如何在SCSS文件中使用 if() 函数:
if_function.html
<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 。
style.scss
h2{ color: if( 1 + 1 == 2 , green , red); }
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:
style.css
h2 { color: green; }
输出
让我们执行以下步骤,看看上面的代码如何工作:
将上述html代码保存在 if_function.html 文件中。
在浏览器中打开此HTML文件,将显示如下输出。