如何使用Scss中的控制指令（如@if、@for、@each、@while）进行实例编写？

本文共计888个文字，预计阅读时间需要4分钟。

简介+本文介绍Scss的控制指令的用法，包括：@if、@for、@each、@while。

SassScript提供了基础的控制指令，以便在满足一定条件时使用样式或重复输出格式。例如，在满足特定条件时应用样式，或设置重复输出格式。控制指令是一种指令。

简介

本文介绍Scss的控制指令的用法，包括：@if, @for, @each, @while。

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在Compass等样式库中。

@if

说明

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

简单示例

p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}

编译后的CSS：

p {
border: 1px solid;
}

复杂示例

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明。