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