条件语句（Sass 条件语句）

本节我们来学习 Sass 中的条件语句，可以使用 @if 指令来判断条件表达式的值，然后控制输出。Sass 中的 @if、@else 等指令和 JS 中的 if/else 类似。

@if 指令

当 @if 指令后面的表达式返回值为 true 时，输出花括号中的代码，为 false 则不输出。

示例：

下面例子中，定义了一个变量 $num，使用 @if 指令来判断变量的值，当变量值为 1 时，输出字体颜色为 #ee78da，当变量值为 2 时，输出字体颜色为 #65e3e7：

$num:1; h3{ @if $num == 1 { color: #ee78da; } @if $num == 2 { color: #65e3e7; } }

编译成 CSS 代码：

h3 { color: #ee78da; }

从编译后的代码可以很明显的看出，因为变量 $num 的值为 1，所以最终输出的颜色值为 #ee78da。

@else指令

if 指令后面可以跟一个 @else 指令，但是 @else 指令不需要带有条件表达式。当不满足 @if 指令后面接的条件时，会执行 @else 指令中的内容。

示例：

$num:1; h3{ @if $num == 2 { color: #ee78da; } @else { color: #65e3e7; } }

编译成 CSS 代码：

h3 { color: #65e3e7; }

可以看到，因为变量 $num 的值为1 ， @if 指令后面的条件表达式不满足，所以最终输出的颜色值为 #65e3e7。

@else if指令

@else if 指令也是和 @if 指令一起使用的，@else if 指令后面同样可以接条件表达式。如果 @if 指令后面的条件表达式为 false，则执行 @else if 指令后面的条件表达式，如果都不满足，则执行 @else 指令。

示例：

$num: 3; h3{ @if $num == 1 { font-size: 12px; color: red; } @else if $num == 2{ font-size: 14px; color: green; } @else if $num == 3{ font-size: 16px; color: yellow; } @else { font-size: 18px; color: pink; } }

编译成 CSS 代码为：

h3 { font-size: 16px; color: yellow; }

总结

Sass 中的 @if 指令后面可以接多个 @else if 指令和一个 @else 指令。@if 指令和 @else if 指令后面都需要接条件表达式，@else 指令则不用。