序章：为何选择 SCSS？—— CSS 预处理器对决

1. 结论先行：2025 年的技术选型

问得非常好！这是每个前端开发者都会遇到的问题。简单来说，它们都是“CSS 预处理器”，能让你用更强大、更像编程语言的方式来写 CSS。在深入细节之前，我们先给出最终结论。

2. 核心对比：SCSS vs. Sass vs. Less

首先，一个最关键的概念要理清：Sass 和 SCSS 是同一个东西的两种不同写法。SCSS 是后来推出的，现在已经成为事实上的标准写法。

3. 深度解析：一场关于语法与功能的演进

3.1. 一家人，两种风格：Sass vs. SCSS

Sass 是最早出现的，它采用了一种非常激进的“缩进语法”，完全抛弃了 CSS 的花括号 {} 和分号 ;，用换行和缩进来区分代码块。

Sass 语法示例 (.sass):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 变量
$primary-color: #3498db
$font-size: 16px

// 嵌套
nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  a
    display: block
    padding: 6px 12px
    text-decoration: none
    color: $primary-color

这种写法非常简洁，但对习惯了写 CSS 的前端开发者来说，学习成本高，而且无法直接把现有的 .css 文件改名为 .sass 来用。

为了解决这个问题，Sass 团队推出了 SCSS (Sassy CSS)。它 完全兼容 CSS 语法，你写的任何 CSS 代码都是合法的 SCSS 代码。它只是在 CSS 的基础上增加了变量、嵌套等强大功能。

SCSS 语法示例 (.scss):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 变量
$primary-color: #3498db;
$font-size: 16px;

// 嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: $primary-color;
  }
}

3.2. 真正的对决：SCSS vs. Less

它们俩才是真正的竞争对手，都采用了兼容 CSS 的语法。

Less 语法示例 (.less):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 变量
@primary-color: #3498db;
@font-size: 16px;

// 嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: @primary-color;
  }
}

它们最直观的区别是变量符号：SCSS 用美元符号 $，Less 用艾特符号 @。然而，真正的差距在于：

• 逻辑功能: 这是 SCSS 胜出的关键。SCSS 提供了完整的编程逻辑，比如条件语句 (@if/@else) 和循环语句 (@for, @while, @each)，可以用来生成复杂的样式。而 Less 在这方面功能很弱，只能通过一种叫做 “Guarded Mixins” 的方式来模拟简单的 if 判断，没有循环功能。

4. 历史的终局：为何 SCSS 最终胜出？

1. 更强大的功能
   如上所述，SCSS 提供了完整的编程控制流，在处理复杂样式系统和组件库时优势巨大。

2. 更平滑的入门 (相对于老 Sass)
   SCSS 完全兼容 CSS，开发者可以无痛上手，在现有项目中逐步引入新特性。

3. 生态和社区的胜利

   • Bootstrap 的转向: 这是一个决定性的事件。流行的前端框架 Bootstrap 在第 3 版时使用的是 Less，但在 第 4 版时全面转向了 SCSS。这一举动直接影响了全球数百万开发者，极大地推动了 SCSS 的普及。
   • 更活跃的社区: Sass/SCSS 的社区更大，工具链（如官方推荐的 Dart Sass）更成熟、性能更优，第三方库也更丰富。

5. 给您的学习建议

• 新项目/学习: 毫不犹豫地选择 SCSS。它是当前最强大、最流行、生态最好的 CSS 预处理器。
• 维护旧项目: 如果项目用的是 Less，你只需要花几分钟就能看懂它的语法，因为和 SCSS 真的非常像，只是变量符号不同而已。没有必要特意去深入学习 Less 的所有高级特性。
• Sass 缩进语法: 你几乎不会在现代项目中看到它，了解一下即可。