【CSS】CSS 和 SASS 的区别
Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器，扩展了 CSS 的功能，使样式表更具结构性和可维护性。它提供了两种语法：Sass（缩进语法）和 SCSS（Sassy CSS，使用 CSS 样式的语法）。SCSS 是 Sass 的一种语法形式，兼容所有 CSS 语法，并添加了 Sass 的功能。([YouTube][1], [维基百科][2])
以下是 CSS 与 Sass（SCSS）之间的主要区别：
🌟 功能对比
| 功能 | CSS 支持 | Sass（SCSS）支持 | 说明 | |
|---|---|---|---|---|
| 变量 | ✅（CSS 变量） | ✅（更强大） | Sass 使用 $ 定义变量，支持更复杂的操作和作用域管理。 | |
| 嵌套规则 | ✅（只有新版本的CSS支持） | ✅ | Sass 允许嵌套选择器，反映 HTML 结构，提升可读性。 | |
| 混入（Mixins） | ❌ | ✅ | Sass 的 mixin 类似于函数，可重用样式块，支持参数和默认值。 | |
| 继承（@extend） | ❌ | ✅ | Sass 支持选择器继承，减少重复代码。 | |
| 控制指令（如 @if、@for） | ❌ | ✅ | Sass 提供条件语句和循环，增强样式逻辑性。 | |
| 分部文件和导入 | ✅（@import） | ✅（@use、@forward） | Sass 的模块系统更强大，支持命名空间和更好的依赖管理。 | ([WIRED][3], [GeeksforGeeks][4], [维基百科][2], [Mugo Web][5], [Chris Coyier][6]) |
🧩 语法示例对比
CSS 示例：
/* 定义变量 */
:root {--main-color: #333;
}body {color: var(--main-color);
}
SCSS 示例：
// 定义变量
$main-color: #333;body {color: $main-color;
}
SCSS 的语法更接近传统的 CSS，使得从 CSS 过渡到 SCSS 更加平滑。