指南

SCSS 流程控制与逻辑语法

通过 @if、@else 和循环语法，动态生成样式，打造灵活高效的前端样式代码

🎯 引言

学会 SCSS 的流程控制和逻辑语法，你就能让 CSS 样式“动起来”，写出更灵活、更高效、结构更清晰的样式表。本文将详细讲解 SCSS 中的条件判断和循环语法，并结合实际场景，比如生成栅格系统和颜色组合，让你轻松掌握 SCSS 编程能力，实现样式的动态生成。

🌀 SCSS 中的条件判断：@if 与 @else

在 SCSS 里，@if 和 @else 用来实现条件判断，类似编程语言中的 if-else 语句。它们可以让你根据不同的条件输出不同的样式。

$theme: dark;

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

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

这段代码的意思是：

如果 $theme 是 light，设置浅色背景和深色文字。
如果 $theme 是 dark，设置深色背景和浅色文字。
否则，设置灰色背景和黑色文字。

用 @if/@else 可以让你的样式根据变量动态变化，非常适合主题切换、响应式设计等场景。

🔄 SCSS 中的循环控制：@for、@each、@while

循环是让样式“自动生成”的利器。SCSS 支持三种循环方式，分别适用于不同场景。

1. @for 循环

@for 用于对数字范围内的数字进行循环，从而动态生成样式。

@for $i from 1 through 3 {
    .col-#{$i} {
        flex-grow: 1;
    }
}

.col-1 {
    flex-grow: 1;
}

.col-2 {
    flex-grow: 1;
}

.col-3 {
    flex-grow: 1;
}

这段代码会自动生成 .col-1 到 .col-3 共 3 个类。

2. @each 循环

@each 用于遍历列表或映射（键值对），非常适合处理颜色组合或多种样式集合。

$colors: (
    primary: #007bff,
    success: #28a745,
    danger: #dc3545,
);

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

.text-primary {
    color: #007bff;
}

.text-success {
    color: #28a745;
}

.text-danger {
    color: #dc3545;
}

这段代码会生成 .text-primary、.text-success、.text-danger 三个类，分别对应不同颜色。

3. @while 循环

@while 根据条件判断，适合复杂但不常用的循环逻辑。

$i: 1;
@while $i <= 3 {
    .item-#{$i} {
        margin-left: 10px * $i;
    }
    $i: $i + 1;
}

.item-1 {
    margin-left: 10px;
}

.item-2 {
    margin-left: 20px;
}

.item-3 {
    margin-left: 30px;
}

这会生成 .item-1 到 .item-5，每个类的左外边距递增。

对于大多数样式动态生成，@for 和 @each 更常用，@while 更多用于更灵活的控制。

🌈 实战演练：用 SCSS 生成栅格系统和颜色组合

生成栅格系统

栅格系统是前端布局中的重要组成部分，很多框架都提供了类似 12 栅格系统的方案。借助 SCSS 循环，我们可以自己生成对应的类。

$columns: 12;

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

@for $i from 1 through $columns {
    .col-#{$i} {
        flex: 0 0 calc($i / $columns);
        max-width: calc($i / $columns);
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-1 {
    flex: 0 0 0.0833333333;
    max-width: 0.0833333333;
}

.col-2 {
    flex: 0 0 0.1666666667;
    max-width: 0.1666666667;
}

.col-3 {
    flex: 0 0 0.25;
    max-width: 0.25;
}

.col-4 {
    flex: 0 0 0.3333333333;
    max-width: 0.3333333333;
}

.col-5 {
    flex: 0 0 0.4166666667;
    max-width: 0.4166666667;
}

.col-6 {
    flex: 0 0 0.5;
    max-width: 0.5;
}

.col-7 {
    flex: 0 0 0.5833333333;
    max-width: 0.5833333333;
}

.col-8 {
    flex: 0 0 0.6666666667;
    max-width: 0.6666666667;
}

.col-9 {
    flex: 0 0 0.75;
    max-width: 0.75;
}

.col-10 {
    flex: 0 0 0.8333333333;
    max-width: 0.8333333333;
}

.col-11 {
    flex: 0 0 0.9166666667;
    max-width: 0.9166666667;
}

.col-12 {
    flex: 0 0 1;
    max-width: 1;
}

这样就自动生成了 .col-1 到 .col-12，每个类的宽度和最大宽度对应栅格比例。

颜色组合生成

很多项目中会有多种颜色状态，比如按钮的不同颜色。利用 @each，可以轻松生成对应样式。

$button-colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745,
    danger: #dc3545,
    warning: #ffc107,
);

@each $name, $color in $button-colors {
    .btn-#{$name} {
        background-color: $color;
        color: white;
        padding: 0.5em 1em;
        border-radius: 4px;
    }
}

.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
}

.btn-success {
    background-color: #28a745;
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
}

.btn-warning {
    background-color: #ffc107;
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
}

这样你就得到了多种按钮颜色样式，维护起来更轻松。

动态生成的样式让项目更易维护，也方便统一风格调整，提升开发效率。

🧾 小节总结

SCSS 的 @if 和 @else 实现条件分支，适合根据变量调整样式。
@for、@each 和 @while 三种循环让样式动态生成，减少重复代码。
结合循环和条件判断，可以轻松生成栅格系统、颜色组合等实用样式。

❓ 知识问答（Q&A）

Q：SCSS 中 @each 和 @for 的区别是什么？

A：@for 主要用于数字范围循环，适合生成顺序类名；@each 用于遍历列表或映射，适合根据键值生成不同样式。

Q：为什么要用 SCSS 循环生成栅格系统？

A：手写多个宽度类既繁琐又易出错，循环生成保证了代码简洁且统一。

🧪 小练习

在下面模板中，使用 @for 循环生成 .margin-top-1 到 .margin-top-10 的类，分别设置不同的 margin-top 大小。

@for $i from 1 through 10 {
    // 你的代码写这里
}

利用 @each 遍历一个颜色映射，生成 .bg-颜色名 的背景色类，并在 :hover 状态下颜色变亮。

$bg-colors: (
    info: #17a2b8,
    light: #f8f9fa,
    dark: #343a40,
);

// 你的代码写这里

🎉 恭喜你已经掌握 SCSS 的流程控制语法、循环语法和实用动态样式生成技能啦！快把它们用到你的项目中，打造高效、灵活的前端样式吧！

Scss 继承、占位符技巧

全面讲解 Scss 中 @extend、%placeholder 的用法，以及结合 BEM 和模块化拆分的实用技巧，助你写出干净高复用的代码。

SCSS 内置函数

了解 SCSS 的最新内置函数，远离过时 API，提升你的样式编写效率和质量。