跳至主要內容

Sass

atodo2025/10/10大约 18 分钟前端前端CSS

一、Sass 与 SCSS 基础概念

1.1 历史渊源与核心关系

  • Sass 的起源：2006 年由 Hampton Catlin 首次发布，最初设计目标是解决 CSS 原生语法的冗余性和可维护性问题。其采用缩进式语法（无大括号、分号），灵感源自 Ruby 等语言的简洁风格，是最早的 CSS 预处理器之一。
  • SCSS 的诞生：2010 年 Sass 推出第三代版本，命名为 "Sassy CSS"（简称 SCSS）。由于早期 Sass 的缩进语法对习惯 CSS 大括号风格的开发者不够友好，SCSS 回归类 CSS 语法（保留大括号和分号），同时继承 Sass 的所有功能，成为 Sass 的主流语法。
  • 核心关联：SCSS 并非独立于 Sass 的新语言，而是 Sass 的语法扩展，完全兼容原生 CSS。这意味着任何 valid 的 CSS 代码都可以直接作为 SCSS 代码运行，极大降低了 CSS 开发者的学习和迁移成本。目前行业中 85% 以上的项目使用 SCSS，Sass 缩进语法仅在少数场景中使用。

1.2 两者核心区别（语法 / 兼容性 / 流行度）

对比维度SassSCSS补充说明
语法风格简洁缩进（无大括号 / 分号）类 CSS 语法（有大括号 / 分号）Sass 依赖严格的缩进（如 2 个空格）区分层级，缩进错误会直接导致编译失败；SCSS 与 CSS 写法一致，更易被开发者接受。
文件扩展名.sass.scss扩展名是区分两种语法的直观标志，构建工具（如 Webpack）会根据扩展名选择对应的解析器。
CSS 兼容性不兼容原生 CSS完全兼容原生 CSS原生 CSS 文件可直接重命名为 .scss 并使用，而转换为 .sass 需手动调整缩进和去除符号。
学习曲线需适应新语法平滑（CSS 开发者易上手）习惯 Python、Ruby 等缩进式语言的开发者可能更易适应 Sass，而多数前端开发者因熟悉 CSS 更倾向于 SCSS。
行业流行度较低（2023 年占比约 15%）极高（2023 年占比约 85%）主流框架（Bootstrap、Element Plus）和工具（Vue CLI、Vite）均默认支持 SCSS，推动其成为行业标准。

1.3 语法转换工具与方法

  • 命令行转换（sass-convert）：Sass 官方提供的工具，需依赖 Ruby 环境（因初代编译器基于 Ruby 实现）。使用方式：
    • SCSS 转 Sass：sass-convert style.scss style.sass（自动去除大括号、分号并添加缩进）
    • Sass 转 SCSS：sass-convert style.sass style.scss（自动添加大括号、分号并调整格式）
  • 在线转换工具：适合快速少量转换，如 Sassmeister、CodePen 的语法转换功能 等，支持实时预览转换结果。
  • 混合兼容写法：理论上可在项目中同时存在 .sass 和 .scss 文件（通过导入语句关联），但会增加团队协作成本和编译复杂度，不推荐在大型项目中使用。

1.4 语法选择指南

  • 优先选择 SCSS 的场景：
    • 从 CSS 迁移的项目（无需修改原有代码结构）；
    • 大型团队协作（降低新成员学习成本，减少语法冲突）；
    • 集成主流框架（如 Bootstrap、Vue 组件库均以 SCSS 为基础）；
    • 需要兼容现有 CSS 生态（如第三方 CSS 库、浏览器插件样式）。
  • 可选择 Sass 的场景：
    • 个人独立项目（开发者偏好简洁缩进风格）；
    • 熟悉 Python/Ruby 等缩进式语言的团队（降低适应成本）；
    • 小型原型开发（快速编写少量样式，追求代码极简）。

二、Sass 三代编译器发展与特性

2.1 Ruby Sass（初代编译器）

  • 实现基础：完全基于 Ruby 语言开发，是 Sass 最初的官方实现。
  • 核心功能：奠定了 CSS 预处理器的核心能力，包括变量、嵌套规则、混合宏（Mixin）、继承（@extend）等，解决了原生 CSS 代码复用性差的问题。
  • 生命周期：2019 年 3 月 Sass 团队宣布停止维护，不再支持新特性开发。原因包括：Ruby 语言执行效率较低，编译大型项目时性能瓶颈明显；依赖 Ruby 环境导致安装和配置复杂（尤其在 Windows 系统）。
  • 局限性：
    • 必须安装 Ruby 环境才能使用，与 Node.js 主导的前端工程化体系兼容性差；
    • 编译速度慢，无法满足大型项目的构建需求；
    • 对 CSS 新特性（如 Flexbox、Grid）的支持滞后。

2.2 Node Sass（二代编译器）

  • 底层架构：基于 C++ 实现的 LibSass 引擎，通过 Node.js 封装为 node-sass 包，实现与前端工程化工具的集成。
  • 核心优势：
    • 性能提升：C++ 原生代码执行效率远超 Ruby，编译速度比 Ruby Sass 快 5-10 倍；
    • 生态适配：支持 Node.js API，可直接与 Webpack、Gulp 等构建工具结合；
    • 内存占用低：相比后续的 Dart Sass，对系统资源的消耗更小。
  • 生命周期：2020 年 10 月官方宣布弃用，仅维护重大 bug 和安全问题。原因是 LibSass 核心团队解散，无法跟进 CSS 新特性，且 C++ 实现导致跨平台兼容性问题频发。
  • 局限性：
    • 强依赖 Node 版本：node-sass 需与 Node.js 版本严格匹配（如 node-sass@6.x 仅支持 Node 14-16），版本不匹配会导致安装失败（常见 "node-gyp rebuild" 错误）；
    • 新特性滞后：因 LibSass 停止更新，无法支持 CSS 变量、clamp() 等新语法；
    • 安装门槛高：需本地安装 Python 和 C++ 编译工具（如 Windows 需 Visual Studio），新手易踩坑。

2.3 Dart Sass（三代编译器，当前推荐）

  • 技术实现：基于 Dart 语言开发，通过编译为纯 JavaScript 包（npm 包名为 sass）分发，摆脱对特定语言环境的依赖。
  • 发布背景：2016 年 11 月发布 Alpha 版，2019 年 Ruby Sass 停更后成为官方主推编译器，1.23.0+ 版本支持模块化语法（@use、@forward）。
  • 核心优势：
    • 官方首选：Sass 团队直接维护，确保与最新 CSS 标准同步（如支持 CSS 嵌套、颜色函数等）；
    • 跨平台兼容：纯 JS 实现，无需依赖系统环境，npm install sass 即可使用，解决 Node Sass 的安装痛点；
    • 工程化适配：原生支持 Vue CLI、Vite、Create React App 等主流工具，无需额外配置；
    • 模块化支持：通过 @use 替代 @import，解决变量污染和重复编译问题。
  • 局限性：
    • 编译速度：纯 JS 执行效率略低于 Node Sass（大型项目编译时间可能增加 10-20%）；
    • 内存占用：JS 运行时的特性导致内存消耗高于 Node Sass，但现代设备通常可忽略此差异。

三、SCSS 核心语法与特性

3.1 变量系统

3.1.1 SCSS 变量定义与规则

  • 基础格式：以美元符号 $ 开头，语法为 $变量名: 变量值，例如 $primary-color: #3498db;。
  • 核心规则详解：
    1. 命名规范：变量名可包含字母、数字、下划线（_）和横线（-），但不能以数字开头（如 $1font 无效）；
    2. 命名兼容：横线与下划线视为同一变量（如 $font-size 和 $font_size 指向同一值），但建议团队统一风格（推荐横线，与 CSS 命名一致）；
    3. 声明顺序：必须先定义后使用，未定义的变量会导致 "Undefined variable" 编译错误；
    4. 默认值机制：通过 !default 声明默认值（如 $color: red !default;），若变量已被定义则默认值失效，常用于组件库的可配置变量（如用户可自定义主题色，未定义时使用默认值）。

3.1.2 变量作用域

  • 全局变量：
    • 定义在最外层（非嵌套结构中）的变量，作用域覆盖整个项目；
    • 局部变量可通过 !global 关键字提升为全局变量，例如：
      .container {
  $width: 1200px !global; // 局部变量转为全局
}
.header {
  width: $width; // 可访问全局变量 $width
}
  • 局部变量：
    • 定义在嵌套规则（如选择器、@media、@mixin 等）内部，仅在当前作用域有效；
    • 示例：
      .card {
  $padding: 16px; // 局部变量，仅在 .card 内有效
  padding: $padding;
}
.btn {
  padding: $padding; // 报错：Undefined variable
}

3.1.3 SCSS 变量与 CSS 变量对比

对比维度SCSS 变量CSS 原生变量核心差异场景
定义格式$变量名: 值--变量名: 值（需在选择器内，如 :root { --color: red; }）SCSS 变量定义在全局或局部作用域，CSS 变量必须定义在选择器内（通常用 :root 声明全局 CSS 变量）。
使用方式直接引用（color: $color）var(--变量名)（如 color: var(--color)）SCSS 变量编译后直接替换为值，CSS 变量保留变量形式，运行时通过 var() 解析。
编译特性编译时静态替换运行时动态生效修改变量值时，SCSS 需重新编译，CSS 变量可通过 JS 实时修改（document.documentElement.style.setProperty('--color', 'blue')）。
核心场景静态样式复用（如主题色、尺寸）动态交互（如深色模式切换、用户自定义主题）结合使用：用 SCSS 变量定义 CSS 变量的默认值（如 :root { --color: $scss-color; }），兼顾静态复用和动态切换。

3.2 注释规则

  • 多行注释（/* ... */）：
    • 编译后默认保留（除非使用 compressed 压缩模式）；
    • 加 ! 可强制保留（如 /*! 版权所有 © 2023 */），即使压缩也不会被移除，常用于版权信息或关键说明。
  • 单行注释（// ...）：
    • 仅在 SCSS 源文件中可见，编译为 CSS 时自动删除；
    • 适合开发过程中的临时注释（如说明代码逻辑），不影响生产环境的 CSS 体积。

3.3 父选择器 & 用法

  • 伪类绑定：在嵌套规则中 & 代指父选择器，简化伪类（如 :hover、:active）的写法：

    .link {
  color: blue;
  &:hover { // 等价于 .link:hover
    color: red;
  }
  &:visited { // 等价于 .link:visited
    color: purple;
  }
}

  • 选择器拼接：通过 & 与后缀拼接生成新选择器，常用于 BEM 命名或组件变体：

    .btn {
  padding: 8px 16px;
  &-primary { // 等价于 .btn-primary
    background: blue;
  }
  &-danger { // 等价于 .btn-danger
    background: red;
  }
}

  • 嵌套层级引用：深层嵌套中，& 代表所有父选择器的组合：

    .nav {
  .item {
    &.active { // 等价于 .nav .item.active
      color: #fff;
    }
  }
}

3.4 数据类型（7 种核心类型）

  • 数字：带单位或无单位，如 12、3.14、20px、5rem，支持算术运算。
  • 字符串：分有引号和无引号，如 "Hello"、'World'、sans-serif（无引号常用于字体名称）。
  • 颜色：支持多种格式，如关键字（red）、十六进制（#ff0000、#f00）、RGBA（rgba(255, 0, 0, 0.5)）、HSLA（hsla(0, 100%, 50%, 0.5)）。
  • 布尔型：仅 true 和 false 两个值，用于条件判断（如 @if 语句）。
  • 空值：仅 null，表示无值，常用于默认参数或条件判断（如 @if $value == null）。
  • 数组（List）：由空格或逗号分隔的值列表，如 10px 20px 30px（空格分隔）、"a", "b", "c"（逗号分隔），可通过 nth($list, $index) 访问元素。
  • 映射（Maps）：键值对集合（类似 JS 对象），格式为 (key1: value1, key2: value2)，如 $theme: (primary: blue, secondary: gray)，通过 map-get($map, $key) 获取值。

3.5 运算符与计算

  • 基础运算符：
    • 相等/不相等：==（等于）、!=（不等于），支持所有数据类型（如 10px == 10px 为 true，"a" != "b" 为 true）；
    • 关系运算：<、>、>=、<=，仅用于数值比较（如 5 > 3 为 true，10px < 20px 为 true）；
    • 布尔运算：and（与）、or（或）、not（非），如 true and false 为 false，not true 为 false。
  • 除法运算（特殊处理）：
    • Dart Sass 2.0+ 弃用 / 作为除法运算符（避免与 CSS 中 / 的多义性，如 font: 12px/1.5），需使用 math.div() 函数：
      // 正确写法
$width: math.div(100px, 2); // 结果为 50px
// 错误写法（会报警告）
$width: 100px / 2;
    • 批量迁移工具：sass-migrator 可自动将项目中所有 / 除法转换为 math.div()，使用步骤：
      1. 安装：npm install -g sass-migrator；
      2. 执行：sass-migrator division src/**/*.scss（递归处理 src 目录下的所有 SCSS 文件）。
  • 运算优先级：同数学逻辑，可通过圆括号 () 调整，例如 (10 + 20) * 2 结果为 60，10 + 20 * 2 结果为 50。

3.6 逻辑控制与循环

  • 条件语句（@if/@else if/@else）：根据条件执行不同样式，例如：
    $theme: dark;
.container {
  @if $theme == dark {
    background: #333;
    color: #fff;
  } @else if $theme == light {
    background: #fff;
    color: #333;
  } @else {
    background: #f5f5f5;
  }
}
  • 循环语句（@each）：遍历数组或映射，批量生成样式，例如：
    // 遍历数组
$sizes: small medium large;
@each $size in $sizes {
  .text-#{$size} {
    font-size: if($size == small, 12px, if($size == medium, 16px, 20px));
  }
}

// 遍历映射
$colors: (primary: blue, danger: red);
@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
  }
}
  • 媒体查询嵌套：允许在选择器内部嵌套 @media，使相关样式集中管理，提升可读性：
    .header {
  height: 60px;
  @media (min-width: 768px) { // 等价于 @media (min-width: 768px) { .header { ... } }
    height: 80px;
  }
}

3.7 编译输出配置

  • 输出格式（--style 选项）：
    • nested（默认）：保留嵌套层级的缩进，与 SCSS 源文件结构一致，适合开发调试；
    • expanded：展开格式，每个选择器和属性单独占一行，结构清晰，适合生产环境非压缩版本；
    • compact：紧凑格式，每个选择器占一行，属性紧随其后，减少换行；
    • compressed：压缩格式，移除所有空格和注释，最小化文件体积，适合生产环境。
  • 命令行示例：
    # 单文件编译（expanded 格式）
sass --style=expanded src/style.scss dist/style.css

# 监听目录（当 scss 目录文件变化时，自动编译到 css 目录，不生成 source-map）
sass --watch scss:css --style=compressed --no-source-map

四、Dart Sass 与 Node Sass 对比及迁移

4.1 核心差异（实现 / 性能 / 兼容性）

对比维度Dart SassNode Sass补充说明
底层实现Dart（编译为 JS 包）C++（LibSass）+ Node.js 封装Dart Sass 纯 JS 实现，跨平台无依赖；Node Sass 依赖 C++ 二进制文件，需匹配 Node 版本。
编译速度较慢（纯 JS 执行）较快（C++ 原生性能）大型项目中，Node Sass 编译速度比 Dart Sass 快 10-30%，但 Dart Sass 性能持续优化（如增量编译）。
内存占用较高较低JS 运行时的垃圾回收机制导致 Dart Sass 内存占用更高，但现代设备通常可忽略。
安装难度简单（无 Node 版本绑定）复杂（需匹配 Node 版本）Node Sass 安装失败常见原因：Node 版本不兼容、缺少 C++ 编译工具、网络问题（需下载二进制文件）。
CSS 新特性支持全面（官方优先更新）滞后（2020 年后停止新特性）如 CSS 嵌套、color-mix() 等新功能，Dart Sass 同步支持，Node Sass 因 LibSass 停更无法支持。
官方支持推荐使用（当前主流）已弃用（仅维护 bug）2020 年起 Sass 团队明确表示 Dart Sass 是唯一官方支持的编译器，Node Sass 不再开发新功能。

4.2 迁移必要性

  • 官方强制导向：2020 年 10 月 Sass 团队宣布弃用 LibSass/Node Sass，未来所有新特性仅在 Dart Sass 中实现，继续使用 Node Sass 会导致功能缺失。
  • 工程化适配需求：主流前端工具（Vue CLI 3+、Vite、Webpack 5）和组件库（Element Plus、Ant Design Vue）已默认集成 Dart Sass，Node Sass 可能出现兼容性问题（如 loader 版本冲突）。
  • 开发体验优化：Node Sass 安装时的 "版本不匹配" 错误是前端开发常见痛点，Dart Sass 纯 JS 实现可彻底解决此问题，降低环境配置成本。
  • 新特性可用性：如需使用 CSS 新特性（如 clamp()、颜色函数）或 Sass 模块化语法（@use、@forward），必须迁移至 Dart Sass。

4.3 迁移步骤（以 Vue 项目为例）

  1. 卸载 Node Sass 相关依赖：

    npm uninstall node-sass sass-loader
# 或 yarn
yarn remove node-sass sass-loader

  2. 安装 Dart Sass 及兼容的 loader：

    # 安装 Dart Sass（npm 包名为 sass）和适配的 sass-loader
npm install sass sass-loader@^10.1.1 -D
# 注：sass-loader 13.0+ 依赖 Webpack 5，若项目用 Webpack 4 需指定 10.x 版本

  3. 处理深度选择器兼容：Vue 项目中，将 /deep/ 替换为 ::v-deep（Dart Sass 不支持 /deep/ 语法）：

    // 旧写法（Node Sass 支持）
/deep/ .el-input { ... }

// 新写法（Dart Sass 支持）
::v-deep .el-input { ... }

  4. 可选配置（临时兼容）：若需临时保留 Node Sass，在 package.json 或构建配置中指定：

    // package.json
{
  "sassImplementationName": "node-sass"
}

4.4 迁移常见问题与解决方案

问题现象解决方案
SassError: expected selector. /deep/全局替换 /deep/ 为 ::v-deep（Vue 2）或 :deep()（Vue 3）。
除法语法弃用警告（Dart Sass 2.0+）1. 手动替换：100px / 2 → math.div(100px, 2)；
2. 批量迁移：使用 sass-migrator division **/*.scss 自动处理。
calc 函数编译报错确保 calc 表达式中数值带单位（如 calc(100% - 200px) 而非 calc(100% - 200)），避免 SCSS 编译时单位校验失败。
@each 循环变量拼接报错变量拼接时强制转为字符串：&-#{$name} → &-#{""+$name}（解决部分场景下变量类型导致的解析错误）。
sass-loader 版本冲突（TypeError: this.getOptions）降低 sass-loader 版本至 10.x（如 sass-loader@10.1.1），适配 Webpack 4 环境。
模块化语法报错（@use 未识别）确保 Dart Sass 版本 ≥ 1.23.0（支持 @use），升级依赖：npm update sass。

五、Sass 在前端项目中的实践

5.1 框架集成配置

5.1.1 Vue 项目配置

  • Vue CLI/Vite 初始化：

    • Vue CLI 创建项目时，勾选 "Sass/SCSS" 选项，默认集成 Dart Sass；
    • Vite 原生支持 SCSS，无需额外配置，直接导入 .scss 文件即可。

  • Vue 2 兼容处理：

    • 迁移后若报错，检查 sass-loader 版本（需 ≤ 10.x）；
    • 深度选择器统一使用 ::v-deep（替代 /deep/ 和 >>>）。

  • 动态换肤方案：结合 SCSS 变量与 CSS 变量实现，步骤：

    1. 用 SCSS 变量定义主题色映射：
      // variables.scss
$theme-colors: (
  primary: #3498db,
  success: #2ecc71,
  danger: #e74c3c
);
    2. 生成 CSS 变量：
      // theme.scss
@use 'variables' as v;
:root {
  @each $name, $color in v.$theme-colors {
    --#{$name}-color: #{$color};
  }
}
    3. 组件中使用 CSS 变量，并通过 JS 动态修改：
      <style scoped lang="scss">
.btn {
  background: var(--primary-color);
}
</style>

<script>
// 切换主题色
const setTheme = (color) => {
  document.documentElement.style.setProperty('--primary-color', color);
};
</script>

5.1.2 组件库应用

  • Element Plus：采用 Dart Sass 的模块化语法（@use）重构样式系统，将变量、混合宏按功能拆分（如 variables.scss、mixin.scss），通过 @forward 暴露接口，避免 @import 导致的变量重复和样式冗余。
  • Bootstrap（v4+）：以 SCSS 为基础构建，提供 _variables.scss 让用户自定义主题（如修改 $primary 变量改变主色调），通过 @import 导入核心样式，实现按需定制。
  • Material UI：使用 SCSS 管理组件样式的复用逻辑，通过混合宏（@mixin）封装共性样式（如按钮状态、阴影效果），提升组件一致性。

5.2 编译工具与命令

  • Dart Sass 基础命令：

    • 单文件编译：sass input.scss output.css；
    • 监听文件变化：sass --watch input.scss:output.css；
    • 监听目录：sass --watch scss:css（将 scss 目录下的文件编译到 css 目录）。

  • 工程化集成（Webpack）：

    // webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 将 CSS 注入 DOM
          'css-loader',   // 解析 CSS
          'sass-loader'   // 将 SCSS 编译为 CSS（依赖 dart-sass）
        ]
      }
    ]
  }
};

  • 工程化集成（Vite）：无需额外配置，直接在 <style> 标签中使用 lang="scss"，或导入 .scss 文件：

    <style lang="scss">
@use './variables' as v;
.box {
  color: v.$primary;
}
</style>

5.3 最佳实践

  • 语法一致性：团队内部统一使用 SCSS 或 Sass，避免混合语法导致的维护混乱（推荐 SCSS，兼容性更强）。
  • 模块化管理：用 @use 替代 @import（Dart Sass 推荐），通过命名空间避免变量污染：
    // variables.scss
$primary: blue;

// style.scss
@use 'variables' as v; // 导入并命名为 v
.box {
  color: v.$primary; // 通过命名空间访问
}
  • Map 高效管理主题：用映射（Maps）集中管理主题色、尺寸等，便于遍历生成样式和 CSS 变量：
    $spacing: (
  xs: 4px,
  sm: 8px,
  md: 16px
);
// 生成间距类
@each $name, $value in $spacing {
  .m-#{$name} {
    margin: $value;
  }
}
  • 媒体查询嵌套：在选择器内嵌套 @media，使相关样式就近维护，提升可读性：
    .card {
  width: 100%;
  @media (min-width: 768px) {
    width: 50%;
  }
  @media (min-width: 1200px) {
    width: 33.33%;
  }
}
  • 注释规范：
    • 版权信息、公共组件说明用多行注释（/*! ... */），确保编译后保留；
    • 临时调试、逻辑说明用单行注释（// ...），避免污染生产 CSS。

六、常见报错与解决方案

6.1 编译报错

  • 错误 1：SassError: Undefined variable
    原因：变量未定义、定义在局部作用域未加 !global、导入顺序错误。
    解决：检查变量是否先定义后使用；局部变量需全局访问时添加 !global；确保变量所在文件被正确导入。

  • 错误 2：TypeError: this.getOptions is not a function
    原因：sass-loader 版本与 Webpack 不兼容（如 sass-loader 13+ 需 Webpack 5）。
    解决：降低 sass-loader 版本至 10.x（如 npm install sass-loader@10.1.1 -D）。

  • 错误 3：SassError: expected selector
    原因：使用了 Dart Sass 不支持的选择器语法（如 /deep/）。
    解决：将深度选择器替换为 ::v-deep（Vue 2）或 :deep()（Vue 3）。

  • 错误 4：Module build failed (sass-loader)
    原因：SCSS 语法错误（如除法未用 math.div、calc 缺少单位、变量类型错误）。
    解决：替换除法为 math.div()；确保 calc 中数值带单位；检查变量类型是否符合运算要求（如数字与字符串不可相加）。

6.2 弃用警告处理

  • 除法警告：Using / for division is deprecated
    原因：Dart Sass 2.0+ 弃用 / 作为除法运算符。
    解决：用 math.div(数值1, 数值2) 替代，或使用 sass-migrator 批量迁移（见 3.5 节）。

  • Node Sass 警告：Node Sass is deprecated
    原因：继续使用已弃用的 Node Sass。
    解决：按 4.3 节步骤迁移至 Dart Sass，避免未来项目构建失败。

参考资料

致谢

最近更新
贡献者: atodo