@if指令接受SassScript運算式和使用嵌套樣式,無論運算式的結果只不過是false或null。
語法
@if expression { //CSS codes are written here }
示例
下麵的例子演示了SCSS檔中如何使用@if指令：
<html> <head> <meta charset="utf-8"> <title>控制指令和運算式</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。
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:\Ruby22-x64\style.scss:style.css
接著執行上面的命令，它會自動創建 style.css 檔，下麵的代碼：
style.css
p {
border: 1px dotted; }
輸出結果
讓我們來執行以下步驟，看看上面的代碼工作：
保存在上面的 html 代碼到 @if_directive.html 檔。在流覽器中打開該HTML檔，獲取輸出如下顯示
上一篇：
Sass if()函數
下一篇：
Sass @else if指令