开发工具精选项目

Sass

拥有变量、嵌套、Mixin、函数和模块系统的成熟 CSS 预处理语言。

GitHub 访问官网

主要语言Dart

开源许可MIT

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

Sass 使用 SCSS 或缩进语法扩展 CSS，在构建时将变量、模块、Mixin、函数与控制逻辑编译为浏览器可直接加载的标准 CSS。

Sass 是采用 MIT 许可证、编译到 CSS 的样式表语言。当前官方实现是 Dart Sass，npm 上的 sass 包是其纯 JavaScript 发行版，同时提供 sass 命令行和现代 JavaScript API。Sass 支持与 CSS 兼容的 SCSS 语法，也支持省略花括号和分号的缩进式 .sass 语法；开发者可以使用变量、嵌套规则、Mixin、函数、List、Map 和控制指令组织大型样式代码。现代 Sass 通过 @use 和 @forward 建立带命名空间、只加载一次的模块系统，并提供 sass:color、sass:math、sass:map 等内置模块。最终浏览器只接收编译后的普通 CSS，不需要 Sass 运行时。

当前稳定版v1.102.0

官方实现Dart Sass

输入语法SCSS / Indented Sass

FEATURES

主要特点

Sass 在标准 CSS 之上提供变量、模块、复用逻辑和编译期计算，帮助团队建立可配置、可拆分的大型样式体系。

SCSS 与缩进式语法

SCSS 是 CSS 的超集，便于现有样式渐进迁移；缩进式 Sass 则使用换行和缩进表达结构，两者都编译为标准 CSS。

变量与丰富数据类型

可使用 Number、String、Color、List、Map 和 Boolean 表达设计值，并在编译期完成计算、查询和转换。

嵌套规则与父选择器

选择器、媒体查询和部分属性可以与组件结构共置，& 父选择器可描述伪类、状态和 BEM Modifier。

Mixin 与内容块

@mixin、@include、参数、默认值和 @content 可封装响应式规则、可访问状态与重复声明，并允许调用方注入内容。

函数与控制流程

自定义 @function 配合 @if、@each、@for 和 @while，可以从 Token Map 生成 Utility、主题或组件规则。

现代模块系统

@use 为变量、Mixin 和函数添加命名空间并确保模块只执行一次，@forward 可设计面向消费者的公共样式 API。

内置功能模块

sass:color、sass:math、sass:map、sass:list、sass:string、sass:meta 等模块提供类型明确的编译期工具。

CLI 与 JavaScript API

官方包既能监听目录和生成 Source Map，也可通过 compile、compileAsync、Importer 与 Custom Function 嵌入构建系统。

USE CASES

适用场景

适合需要成熟预处理能力、可配置样式库、复杂设计计算或正在维护大量 SCSS 资产的应用和组件库。

大型传统 Web 应用

适合已经积累大量 SCSS Partial、Mixin 和组件样式的后台、门户、电商及内容平台。

可配置组件库

库作者可用 !default 变量、@use with 和 @forward 暴露颜色、间距、排版与组件开关。

设计令牌和 Utility 生成

从 Map、List 与循环生成间距、颜色、断点和状态类，减少手工重复规则。

响应式样式抽象

用接受 @content 的 Mixin 统一断点、Container Query 或用户偏好媒体查询。

多页面与服务端项目

Sass 可独立编译为静态 CSS，适用于传统服务端模板、静态站点和不依赖 JavaScript 框架的页面。

渐进增强现有 CSS

SCSS 兼容普通 CSS，团队可以先改文件扩展名，再逐步引入模块、变量和复用逻辑。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

Sass 擅长的地方

语言成熟稳定，文档、编辑器、框架集成和团队经验都非常丰富
SCSS 与标准 CSS 高度兼容，现有样式可以低成本渐进迁移
@use 和 @forward 为变量、函数与 Mixin 提供命名空间和明确公共 API
Mixin、函数、Map 和循环适合表达复杂设计系统与生成重复规则
编译结果是普通 CSS，浏览器无需加载 Sass 运行时
官方 CLI 和 JavaScript API 同时覆盖简单项目、Monorepo 与自定义构建工具

需要注意

采用前应考虑的问题

需要额外编译步骤

浏览器不能直接执行 SCSS 或 Sass，开发、测试、生产和组件库发布流程都必须使用兼容版本的 Dart Sass。

Sass @import 已被弃用

Dart Sass 从 1.80.0 起弃用 Sass @import 和全局内置函数，新代码应迁移到 @use、@forward 与 sass:* 内置模块。

不会自动隔离类名

Sass 生成的选择器默认仍处于全局作用域，组件隔离需要 BEM、CSS Modules、Shadow DOM 或其他命名策略。

过度嵌套会提高特异性

嵌套过深会生成冗长选择器、增加覆盖难度并绑定 DOM 结构，通常应控制在少量层级。

编译期变量不能直接响应运行时

Sass 变量在构建后消失，用户主题、动态品牌和实时值应输出为 CSS Variables，而不是为每种状态重新编译。

Mixin 和循环可能膨胀 CSS

大量 include、主题循环或组合生成器会重复输出声明，应检查最终 CSS，而不能只看 SCSS 是否简洁。

应以 Dart Sass 为兼容基准

LibSass、Ruby Sass 和旧 node-sass 已不再代表当前语言能力，历史项目迁移时要处理模块、除法和颜色函数等差异。

预处理器不能代替后处理

Sass 负责语言编译，但浏览器前缀、CSS 草案转换、检查和压缩通常仍需 PostCSS、Bundler 或其他工具完成。

QUICK START

快速开始

在 Vite 项目中安装官方 sass 包，使用 @use、@forward、Mixin 和内置模块组织一套可配置的 SCSS 样式。

1创建 Vite 项目并安装 Dart Sass

bash

npm create vite@latest sass-app -- --template vanilla-ts
cd sass-app
npm install
npm install -D sass

2定义可配置 Token 和响应式 Mixin

scss

$brand: #cc6699 !default;
$surface: #ffffff !default;
$text: #0f172a !default;
$radius: 0.75rem !default;
$tablet: 48rem !default;

@mixin tablet {
  @media (min-width: $tablet) {
    @content;
  }
}

@mixin focus-ring {
  outline: 3px solid color-mix(in srgb, $brand 65%, white);
  outline-offset: 3px;
}

3使用内置模块创建组件样式

scss

@use "sass:color";
@use "./tokens";

.button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: tokens.$radius;
  background: tokens.$brand;
  color: white;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    background: color.scale(tokens.$brand, $lightness: -15%);
  }

  &:focus-visible {
    @include tokens.focus-ring;
  }
}

4配置模块并加载组件

scss

@use "./styles/tokens" with (
  $brand: #a63d7a,
  $radius: 1rem
);
@use "./styles/button";

.card {
  width: min(32rem, 100%);
  padding: 1.5rem;
  border-radius: tokens.$radius;
  background: tokens.$surface;
  color: tokens.$text;

  @include tokens.tablet {
    padding: 2rem;
  }
}

5由 @forward 设计公共样式 API

scss

// styles/_index.scss
@forward "tokens" show $brand, $radius, tablet, focus-ring;

// consumer.scss
@use "./styles" as design;

.dialog {
  border-radius: design.$radius;

  @include design.tablet {
    max-width: 40rem;
  }
}

6在 Vite 入口导入 SCSS

typescript

import "./main.scss";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <main class="card">
    <h1>Sass</h1>
    <button class="button">开始使用</button>
  </main>
`;

7使用命令行或 JavaScript API 编译

bash

# 单次编译并生成 Source Map
npx sass src/main.scss dist/main.css --source-map

# 监听整个样式目录
npx sass --watch src/styles:dist/styles

# 生产压缩
npx sass src/main.scss dist/main.css --style=compressed

8验证 Vite 生产构建

bash

npm run dev
npm run build
npm run preview

下一步：新代码应使用 @use 和 @forward，不要继续建立基于 Sass @import 和全局成员的架构。控制嵌套深度，并把运行时主题值保留为 CSS Variables，避免为每个主题重复生成整套 CSS。

ALTERNATIVES

类似项目

这些工具同样扩展 CSS 开发流程，但在固定语言特性、插件化转换、局部作用域和浏览器运行时之间选择不同。

PostCSS

通过 JavaScript 插件解析、分析和转换 CSS 的工具平台。

查看项目

CSS Modules

让 CSS 类名和动画名称默认拥有局部作用域的模块化方案。

查看项目

Less

以变量、Mixin、嵌套和函数扩展 CSS 的 JavaScript 预处理语言。

查看项目

Stylus

语法灵活、支持变量、函数、Mixin 和控制流的 CSS 预处理语言。

查看项目

COMPARISON

Sass vs PostCSS

Sass 和 PostCSS 都能参与样式构建，但 Sass 是带有统一语言语义的预处理器，PostCSS 是由项目选择插件组成的 CSS AST 转换平台。Sass 更擅长变量、Mixin、函数、模块和编译期生成；PostCSS 更擅长兼容性、CSS 草案转换、检查、优化与项目专属 AST 自动化。

比较维度	Sass	PostCSS
产品定位	完整样式表语言与编译器	CSS AST、插件 API 与处理流水线
作者语法	SCSS 或缩进式 Sass	默认是 CSS，额外语法由插件或 Parser 决定
核心能力	变量、Mixin、函数、控制流与模块系统	按插件组合语法转换、兼容、检查和优化
模块化	@use、@forward、命名空间和可配置模块	配置文件组织插件，本身不定义样式模块系统
浏览器兼容	把 Sass 语言编译为 CSS，不按目标浏览器自动加前缀	可通过 Autoprefixer 和 preset-env 面向 Browserslist 输出
扩展方式	Mixin、函数、模块、Importer 与 Custom Function	JavaScript AST 插件、自定义 Parser 与 Stringifier
组合关系	常作为 PostCSS 之前的预处理步骤	常继续处理 Sass 生成的 CSS
更适合	复杂样式复用、可配置库和成熟 SCSS 代码库	现代 CSS 转换、兼容优化和工程自动化