本节我们来学习 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 指令则不用。

06-14 23:19