FORMA

CSS、Sass 与 Less

本文对比原生 CSS 与两种主流预处理器 Sass（通常指 SCSS 语法）、Less，便于选型。语法细节见 Sass 简介、Less 核心语法。

分别是什么

名称类型说明
CSS样式表语言浏览器直接解析；现代 CSS 已支持嵌套、自定义属性（--var）、@layer 等
SassCSS 预处理器官方实现为 Dart Sass（npm 包 sass），需编译为 CSS
SCSSSass 的一种语法使用 {} 与 ;，合法 CSS 即合法 SCSS，为当前主流写法（.scss）
LessCSS 预处理器JavaScript 实现，npm 包 less，需编译为 CSS

Sass 与 SCSS 是同一工具的不同语法：.sass 为缩进语法，.scss 为大括号语法。日常说「用 Sass」多指 SCSS。

核心对比

维度CSSSCSSLess
浏览器直接运行是否（需编译）否（需编译）
变量自定义属性 --x$x@x
嵌套原生嵌套（现代浏览器）支持（&）支持（&）
复用块@layer、类名@mixin / @include混合（.mixin()）
模块化@import（原生，有层叠问题）推荐 @use@import
逻辑有限（@media、@supports 等）@if、@for、@each 等when 守卫、较少循环
官方编译器—Dart Sass（npm i -D sass）Less（npm i -D less）

Sass：SCSS 与缩进语法

SCSS（.scss）缩进语法（.sass）
与 CSS超集，可复制粘贴 CSS语法不同，不能直接贴 CSS
采用率主流少见，多为历史项目

新项目建议 SCSS，勿将缩进语法作为团队默认。

何时用原生 CSS

  • 样式量少、无构建步骤的静态页
  • 团队规范以现代 CSS 为主（嵌套、clamp()、自定义属性、Grid/Flex）
  • 不希望增加编译链路

预处理器仍擅长：跨文件变量主题、@mixin 参数化、复杂循环生成样式 等原生不便表达的场景。

何时用 SCSS

  • 中大型项目、组件库源码（如 Bootstrap 5+ 使用 Sass）
  • 需要 @use 模块化、@mixin 带参数、@content 等
  • 与 Vite / Webpack 等已集成 sass 的工具链配合

无历史包袱时，SCSS 是常见默认选择。

何时用 Less

  • 维护已基于 Less 的主题或工程（如 Ant Design 4 及更早版本的主题变量体系）
  • 团队已有 Less 规范与 less-loader 配置
  • 需要较轻量的 JS 侧编译器（lessc）

Ant Design 5+ 采用 CSS-in-JS 方案，不再以 Less 作为默认样式入口；选型请以所用 UI 库官方文档为准。

构建工具

Vite、Webpack、Vue CLI 等均可通过安装 sass 或 less 处理对应文件，无需单独安装 Ruby。

与原生 CSS 演进的关系

原生 CSS 已逐步吸收部分预处理概念（嵌套、变量、color-mix() 等），但循环、带参 mixin、模块 @use 等仍依赖预处理器。采用 SCSS 语法与原生嵌套、逻辑属性并存的项目较多。

变量：SCSS $ 与 CSS --

SCSS $variableCSS --custom-property
生效阶段编译期替换为具体值运行时由浏览器解析
作用域文件/模块（@use 命名空间）继承、受层叠与 DOM 结构影响
用于选择器、属性名可以（如 #{$id} 插值）不行（仅属性值等）
参与媒体查询可以（编译期已知）不行（需 @custom-media 等）
scss
// SCSS：编译后消失
$gap: 1rem;
.card { padding: $gap; }
css
/* CSS：保留在输出中，可随主题切换 */
:root {
    --gap: 1rem;
}
.card {
    padding: var(--gap);
}

主题切换、深色模式、组件库对外 API 常优先 CSS 自定义属性；设计令牌源文件用 SCSS 变量 生成多主题 CSS 也常见。

速查

需求建议
零编译、依赖最少CSS（善用现代特性）
功能完整、生态大、长期维护SCSS + Dart Sass
延续 Less 主题 / 老项目Less
Bootstrap 5+、多数新 UI 源码SCSS

参考文献

以下链接在编写时均可正常访问：

资料说明
Sass 官方文档SCSS 语法、@use、编译（英文）
Less 官方文档语法与函数（英文）
MDN：CSS原生 CSS 参考
MDN：使用 CSS 自定义属性--* 变量
Sass：@import 弃用说明迁移至 @use

相关文章

Series

css

3 / 20

颜色与背景display 与常规流