【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;
}

.item-3 {
  width: 300px;
}

3. 迭代指令（@each）

@each 指令允许你遍历列表或映射，执行样式块。

示例：@each 遍历列表

$icons: home, user, settings;

@each $icon in $icons {
  .icon-#{$icon} {
    background: url('icons/#{$icon}.png');
  }
}

编译后的CSS代码：

.icon-home {
  background: url('icons/home.png');
}

.icon-user {
  background: url('icons/user.png');
}

.icon-settings {
  background: url('icons/settings.png');
}

示例：@each 遍历映射

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
  }
}

编译后的CSS代码：

.btn-primary {
  background-color: #3498db;
}

.btn-secondary {
  background-color: #2ecc71;
}

.btn-danger {
  background-color: #e74c3c;
}

4. 循环指令（@while）

@while 指令允许你在条件为真时重复执行样式块。

示例：@while 循环

$i: 1;

@while $i <= 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

编译后的CSS代码：

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

.item-3 {
  width: 300px;
}

实际应用示例

为了更好地理解这些控制指令的实际应用，我们来看一个完整的示例，展示如何结合使用这些指令来动态生成样式代码。

项目结构

scss/
└── style.scss

style.scss

$theme: light;
$spacing: 10px;
$icons: home, user, settings;
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

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

@for $i from 1 through 4 {
  .col-#{$i} {
    width: 25% * $i;
    padding: $spacing;
  }
}

@each $icon in $icons {
  .icon-#{$icon} {
    background: url('icons/#{$icon}.png');
  }
}

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
    color: #fff;
    padding: $spacing;
    border: none;
    border-radius: 5px;

    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

$i: 1;
@while $i <= 3 {
  .level-#{$i} {
    font-size: 1rem * $i;
    margin-bottom: $spacing * $i;
  }
  $i: $i + 1;
}

编译SCSS

在项目目录下运行以下命令，将SCSS文件编译为CSS文件：

sass scss/style.scss css/style.css

生成的 style.css 文件内容如下：

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

.col-1 {
  width: 25%;
  padding: 10px;
}

.col-2 {
  width: 50%;
  padding: 10px;
}

.col-3 {
  width: 75%;
  padding: 10px;
}

.col-4 {
  width: 100%;
  padding: 10px;
}

.icon-home {
  background: url('icons/home.png');
}

.icon-user {
  background: url('icons/user.png');
}

.icon-settings {
  background: url('icons/settings.png');
}

.btn-primary {
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-secondary {
  background-color: #2ecc71;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.btn-secondary:hover {
  background-color: #27ae60;
}

.btn-danger {
  background-color: #e74c3c;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.btn-danger:hover {
  background-color: #c0392b;
}

.level-1 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.level-2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.level-3 {
  font-size: 3rem;
  margin-bottom: 30px;
}

结论

通过本文的讲解，你应该已经掌握了SCSS中的控制指令（@if、@for、@each 和 @while）。我们详细介绍了这些指令的语法和使用场景，并通过实际应用示例展示了如何结合使用这些指令来动态生成样式代码，帮助你编写更加灵活和动态的样式表。

这些就是关于【SCSS进阶】控制指令（@if、@for、@each、@while）的详细介绍。
这里是爪磕，感谢您的到来与关注，我们将持续为您带来优质的文章。