Sass @else if指令
描述
@else if语句与@if指令一起使用。每当@if语句失败，则尝试@else if语句，如果它们也失败，则执行@else。
语句
@if expression { // CSS codes } @else if condition { // CSS codes } @else { // CSS codes }
例子
以下示例演示如何使用@else if指令：
<html> <head> <title>Control Directives & Expressions</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="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; } @else if $type == mahindra { color: blue; } @else if $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文件，将显示如下输出。
