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 文件，显示如下输出。

sass_control_directives_expressions.htm

打印页面

上一个

下一个