【SCSS进阶】1、控制指令（@if、@for、@each、@while）

【SCSS进阶】控制指令（@if、@for、@each、@while）

系列文章目录

【SCSS进阶】1、控制指令（@if、@for、@each、@while）（本文）
【SCSS进阶】2、高级变量和数据结构（列表、映射）
【SCSS进阶】3、深度嵌套和模块化设计
【SCSS进阶】4、高级混合宏和占位符选择器
【SCSS进阶】5、自定义函数
【SCSS进阶】6、CSS网格和Flexbox布局
【SCSS进阶】7、响应式设计和媒体查询
【SCSS进阶】8、优化和压缩SCSS代码
【SCSS进阶】9、与PostCSS、Autoprefixer等工具的集成
【SCSS进阶】10、最佳实践和性能优化

在SCSS入门系列中，我们学习了SCSS的基本语法和一些常用特性。在SCSS进阶系列中，我们将深入探讨更多高级特性和技巧。本章将介绍SCSS中的控制指令：@if、@for、@each 和 @while。这些指令使得SCSS不仅仅是样式表，而更像是一门编程语言，提供了强大的逻辑和控制流能力。

控制指令概述

SCSS中的控制指令允许你在样式表中编写条件逻辑和循环，动态生成样式代码。这些指令包括：

• @if：条件语句，用于执行不同的样式块。
• @for：循环语句，用于按指定次数重复执行样式块。
• @each：迭代语句，用于遍历列表或映射。
• @while：循环语句，用于在条件为真时重复执行样式块。

1. 条件指令（@if）

@if 指令允许你根据条件来决定是否执行某些样式。

示例：基本条件指令

$theme: light;

body {
  @if $theme == light {
    background-color: #fff;
    color: #000;
  } @else if $theme == dark {
    background-color: #000;
    color: #fff;
  } @else {
    background-color: #f0f0f0;
    color: #333;
  }
}

编译后的CSS代码：

body {
   
   
  background-color: #fff;
  color: #000;
}

2. 循环指令（@for）

@for 指令允许你按指定次数循环执行样式块。它有两种语法：@for $var from <start> through <end> 和 @for $var from <start> to <end>。

• through：包括结束值。
• to：不包括结束值。

示例：@for 循环

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

编译后的CSS代码：

.item-1 {
   
   
  width: 100px;
}

.item-2 {
   
   
  width: 200px;