任何编程语言都支持流程控制，流程控制一般有三种：顺序、选择、循环。顺序是比较简单，下面主要介绍选择和循环。

选择

根据条件选择输出某段样式。使用 @if 和 @else 处理。

@if 用法说明：
@if 条件表达式 { 
	// 您的代码
}

如果“条件表达式”返回 true 则执行代码块中的语句，否则什么都不做。它还可以搭配 @else if 和 @else 语句，@else if 之后写另一个判断表达式，@else 语句会在前面的所有条件都不满足时执行。

@if 条件表达式 { 
	// 您的代码
} @else if 另一个条件表达式 {
  // 您的代码
} @else {
  // 您的代码
}

例子：

$theme: 'dark';

div {
    @if $theme == 'dark' {
        color: 'black';
    } @else if $theme == 'light' {
        color: rgb(173, 235, 140);
    } @else if  $theme == 'chunjie' {
        color: red;
    } @else {
        color:rgb(49, 44, 38);
    }
}

循环和遍历

根据条件，重复输出某段样式。可以使用 @for、@each、@while 进行处理。

@for 的用法：
@for 变量 from 开始值 to 结束值 { 
	// 您的代码
}
@for 变量 from 开始值 through 结束值 { 
	// 您的代码
}

注： to 表示不包含结束的数字， through 表示包含结束的数字

使用例子：

@for $item from 1 to 5 {
    .mt-#{$item} {
        margin-top: 5px * $item;
    }
}

输出结果：

.mt-1 {
  margin-top: 5px;
}

.mt-2 {
  margin-top: 10px;
}

.mt-3 {
  margin-top: 15px;
}

.mt-4 {
  margin-top: 20px;
}
@each 的用法：

主要用来遍历 list 和 map 类型的数据。其语法是：

// $key,$item 都是临时变量
@each $item in $list {
  // 您的代码
}
@each $key,$item in $map {
  // 您的代码
}

使用例子1：遍历列表

@each $color in blue, red, green {
    .#{$color}-text {
        color: $color;
    }
}

输出内容：

.blue-text {
  color: blue;
}
.red-text {
  color: red;
}
.green-text {
  color: green;
}

使用例子2：遍历map

@each $key, $color in (primary:blue, danger:red, success:green) {
    .#{$key}-text {
        color: $color;
    }
}

输出结果：

.primary-text {
  color: blue;
}
.danger-text {
  color: red;
}
.success-text {
  color: green;
}

使用例子3：结构高维list

// 二维列表
$list: (
    'wide' 5px,
    'thin' 1px
);

// 按顺序解构内层的数据
@each $type, $width in $list {
    .#{$type} {
        border: $width solid red;
    }
}

输出结果：

.wide {
  border: 5px solid red;
}
.thin {
  border: 1px solid red;
}
@while 的用法：

在“条件表达式”返回false之前，一直执行代码。

@while 条件表达式 {
  // 您的代码
}

使用例子：

$num: 1;

@while $num < 3 {
    .mt-#{$num} {
        margin-top: 5px * $num;
    }
    $num:$num +1;
}

输出结果：

.mt-1 {
  margin-top: 5px;
}
.mt-2 {
  margin-top: 10px;
}