这一节，我们将学习Sass中的条件语句。您可以使用@if指令来判断条件表达式的值，然后控制输出。Sass中的@if和@else等指令类似于JS中的if/else。@if指令当@if指令后面的表达式的返回值为真时，输出花括号中的代码，如果为假，则不输出。例子：在下面的例子中，定义了一个变量$num，使用@if指令判断变量的值。当变量值为1时，输出字体颜色为#ee78da；当变量值为2时，输出字体颜色为#65e3e7:$num:1;h3{@if$num==1{color:#ee78da;}@if$num==2{颜色：#65e3e7；}}编译成CSS代码：h3{color:#ee78da;}从编译代码可以看出，由于变量$num的值为1，所以最终输出的颜色值为#ee78da。@else指令if指令后可以跟@else指令，但@else指令不需要有条件表达式。当不满足@if指令后面的条件时，将执行@else指令中的内容。示例：$num:1;h3{@if$num==2{颜色：#ee78da;}@else{颜色：#65e3e7;}}编译成CSS代码：h3{color:#65e3e7;}可以看出，因为变量$num的值为1，不满足@if指令后面的条件表达式，所以最终输出的颜色值为#65e3e7。@elseif指令@elseif指令也和@if指令一起使用，@elseif指令后面也可以跟一个条件表达式。如果@if指令后面的条件表达式为假，则执行@elseif指令后面的条件表达式，如果都不满足，则执行@else指令。示例：$num:3;h3{@if$num==1{font-size:12px;红色;}@elseif$num==2{字体大小：14px；颜色：绿色；}@elseif$num==3{字体大小：16px；颜色：黄色；}@else{字体大小：18px；颜色：粉色；}}编译成CSS代码：h3{font-size:16px;color:yellow;}总结Sass中的@if指令后面可以跟多个@elseif指令和一个@else指令。@if指令和@elseif指令都需要后跟条件表达式，但@else指令不需要。
