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变量
}
编译成 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 指令则不⽤。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。