@if指令接受SassScript表达式，并且只要表达式的结果为false或null以外的任何结果，就使用嵌套样式。
@if expression { //CSS codes are written here }
以下示例演示在SCSS文件中使用@if指令:
<html> <head> <title>Control Directives & Expressions</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="container"> <h2>Example for Control Directive & Expressions</h2> <p>SASS stands for Syntactically Awesome Stylesheet. </p> </div> </body> </html>
接下来，创建文件style.scss。
p{ @if 10 + 10 == 20 { border: 1px dotted; } @if 7 < 2 { border: 2px solid; } @if null { border: 3px double; } }
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:rubylibsassstyle.scss:style.css
接下来执行上面的命令，它将自动创建style.css文件用下面的代码:
p { border: 1px dotted; }
让我们执行以下步骤，看看上面的代码如何工作:
将上述html代码保存在@ if_directive.html文件中。
在浏览器中打开此HTML文件，将显示如下输出。
sass变量的声明和css属性的声明很像:$highlight-color: #F90;这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性...
HTML button 标签formmethod 属性定义通过哪种方式发送 form-data，它将覆盖 form 标签中的 method 属性，请参考下述示例：实例...
HTML del 标签cite 属性的值将指向一个URL，该URL会解释为什么文本被删除，请参考下述示例：实例一个删除的文本,文本的URL解释了...
HTML meta 标签scheme 属性定义了content 属性中的值的格式，请参考下述示例：实例使用 scheme 属性来定义 content 属性的格式：...
HTML fieldset 标签form 属性定义属于 fieldset 的表单，请参考下述示例：实例位于 form 表单外的 fieldset 元素（但仍然属于 fo...
