Sass 简介与安装

Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器：在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等能力，最终编译为标准 CSS 供浏览器使用。不能在浏览器中直接运行 .scss / .sass 文件，必须先编译。

一、Sass 是什么

Sass 是预处理器的产品名，而不是某一种具体的文件格式。它的价值在于弥补原生 CSS 早期缺乏变量、嵌套、逻辑控制等能力的短板，让样式代码更易维护、更易复用。随着原生 CSS 陆续引入自定义属性、原生嵌套等特性，Sass 与 CSS 的边界有所重叠，但在跨文件变量主题、带参数的 Mixin、编译期循环生成样式等场景，Sass 仍然是主流选择。

.scss / .sass 源文件 → Dart Sass 编译 → .css → 在 HTML 中引用

二、两种语法：SCSS 与缩进语法

Sass 提供两种源码语法，编译目标相同，选择其一即可，不能在同一文件内混用：

对比维度

代码示例对比

SCSS（.scss）：

$primary-color: #3498db;

.nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        color: $primary-color;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

缩进语法（.sass）：

$primary-color: #3498db

.nav
  ul
    margin: 0
    li
      display: inline-block
      a
        color: $primary-color
        &:hover
          text-decoration: underline

可以看出：SCSS 保留了 {} 和 ;，符合传统 CSS 习惯；缩进语法用换行与缩进替代大括号和分号。

历史背景

• 2006 年：最初的 Sass 语法就是缩进语法（.sass），设计灵感来自 Haml，旨在减少符号噪音。
• 2010 年：Sass 3 引入了 SCSS（.scss），目的是降低 CSS 开发者的入门门槛。此后 SCSS 迅速成为主流，原缩进语法被很多人称为“老式 Sass”。

实际项目中如何选择

结论：二者是同一预处理器的不同语法；新项目与团队协作请默认 SCSS（.scss）。日常说「用 Sass」多数场景下指的就是 SCSS。

三、核心能力速览

四、安装与使用

安装 Dart Sass（官方实现）

npm install -D sass
npx sass --version

也可用 Homebrew 安装独立 CLI（见 Sass 安装）。现代工作流不需要 Ruby。

常用 CLI

除法运算请使用 sass:math 的 math.div()（见 运算）。

在构建工具中使用

五、常见错误

参考文献