編程教程Sass @else if指令
描述
@else if語句與@if指令一起使用。每當@if語句失敗，則嘗試@else if語句，如果它們也失敗，則執行@else。
語句
@ifexpression{// CSS codes}@elseifcondition{// CSS codes}@else{// CSS codes}
例子
以下示例演示如何使用@else if指令：
<html><head><title>Control Directives & Expressions</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><divclass="container"><h1>Example for Control Directive & Expressions</h1><p>SASS stands for Syntactically Awesome Stylesheet.</p></div></body></html>
接下來，創建文件style.scss。
style.scss
$type:audi;p{@if$type==benz{color:red;}@elseif$type==mahindra{color:blue;}@elseif$type==audi{color:green;}@else{color:black;}}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時更新CSS：
sass--watch C:\ruby\lib\sass\style.scss:style.css
接下來執行上面的命令，它將自動創建style.css文件用下面的代碼：
style.css
p{color:green;}
輸出
讓我們執行以下步驟，看看上面的代碼如何工作：
將以上html代碼保存在if_else_directive.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
