📚 最新版 SCSS（Sass）完整教程（2026 年版）

适用版本 ：Dart Sass（当前主流实现，v1.70+）
语法风格 ：SCSS（.scss，推荐使用）
目标读者：前端开发者、CSS 工程师、全栈工程师

1. 什么是 Sass / SCSS？

Sass （Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 的能力，支持：

变量
嵌套规则
混合（Mixin）
继承
函数
条件与循环
模块化

两种语法：

语法	文件扩展名	特点
SCSS	`.scss`	CSS 超集，兼容所有 CSS 代码，使用 `{}` 和 `;`
Sass（缩进语法）	`.sass`	使用缩进代替大括号，已不推荐

✅ 强烈推荐使用 SCSS，因其易读、易迁移、社区支持广泛。

2. 安装与编译

安装 Dart Sass（官方推荐）

bash 复制代码

# 全局安装（需 Node.js）
npm install -g sass

# 或作为项目依赖
npm install sass --save-dev

编译命令

less 复制代码

# 单文件编译
sass main.scss main.css

# 监听模式（自动编译）
sass --watch styles/main.scss:dist/main.css

# 输出压缩格式
sass --style=compressed main.scss main.min.css

# 启用 source map（调试用）
sass --source-map main.scss main.css

构建工具集成

Vite ：原生支持 .scss
Webpack ：使用 sass-loader
React/Vue/Angular：脚手架默认支持

3. 基础语法

SCSS 是 CSS 的超集，所有合法 CSS 都是合法 SCSS：

css 复制代码

/* 合法的 SCSS */
body {
  margin: 0;
  font-family: Arial;
}

4. 变量（Variables）

用 $ 声明变量，作用域为局部或全局。

css 复制代码

// 全局变量
$primary-color: #3498db;
$font-size-base: 16px;

// 局部变量（在选择器内）
.component {
  $local-var: red;
  color: $local-var;
}

默认值（`!default`）

php 复制代码

$theme-color: blue !default; // 仅当未定义时赋值

变量作用域

在选择器/函数/mixin 内定义的变量为局部变量
外部无法访问，但可通过 !global 强制提升为全局（慎用）

csharp 复制代码

$global: white;

.content {
  $global: black !global; // 修改全局变量
}

5. 嵌套（Nesting）

让结构更清晰，但避免过度嵌套（建议 ≤ 3 层）。

css 复制代码

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

  // 父选择器引用 &
  &--fixed {
    position: fixed;
  }
}

伪类/伪元素嵌套

css 复制代码

.button {
  &:hover { opacity: 0.8; }
  &::before { content: "→"; }
}

属性嵌套（较少用）

css 复制代码

.box {
  border: {
    top: 1px solid red;
    bottom: 2px dashed blue;
  }
}

6. 混合（Mixins）

可复用的代码块，支持参数、默认值、内容块。

基本用法

css 复制代码

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.container {
  @include clearfix;
}

带参数的 Mixin

less 复制代码

@mixin button($bg, $color: white) {
  background: $bg;
  color: $color;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.primary-btn {
  @include button(#3498db);
}

可变参数（`...`）

less 复制代码

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}

.card {
  @include box-shadow(0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 white);
}

传递内容块（`@content`）

less 复制代码

@mixin media($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 768px) { @content; }
  }
}

.sidebar {
  width: 300px;
  @include media(mobile) {
    width: 100%;
  }
}

7. 继承（@extend）

共享样式，避免重复代码。

css 复制代码

.message {
  border: 1px solid #ccc;
  padding: 10px;
}

.success {
  @extend .message;
  border-color: green;
}

占位符选择器（%）

不会输出 CSS，仅用于继承：

css 复制代码

%btn-base {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  @extend %btn-base;
  background: blue;
}

⚠️ 警告：过度使用 @extend 可能导致选择器爆炸（selector bloat）。

8. 插值（Interpolation）

用 #{} 动态插入变量值。

动态类名

css 复制代码

$theme: dark;
.panel-#{ $theme } { background: black; }

动态属性

swift 复制代码

$prop: margin;
$side: top;
.#{ $prop }-#{ $side } {
  #{ $prop }-#{ $side }: 20px;
}

在字符串中

css 复制代码

.icon-#{ $name } {
  background: url("/icons/#{ $name }.svg");
}

❌ 不能用于：数学表达式、@import/@use 路径、媒体查询条件等静态上下文。

9. 控制指令（Control Directives）

`@if` / `@else if` / `@else`

less 复制代码

@mixin theme($light: true) {
  @if $light {
    background: white;
    color: black;
  } @else {
    background: black;
    color: white;
  }
}

`@for`

less 复制代码

@for $i from 1 through 5 {
  .item-#{$i} { width: 20px * $i; }
}

`@each`

swift 复制代码

$colors: (red, green, blue);
@each $color in $colors {
  .btn-#{$color} { background: $color; }
}

// 遍历 map
$sizes: (sm: 12px, md: 16px, lg: 20px);
@each $name, $size in $sizes {
  .text-#{$name} { font-size: $size; }
}

`@while`

css 复制代码

$i: 1;
@while $i <= 3 {
  .item-#{$i} { z-index: $i; }
  $i: $i + 1;
}

10. 函数（Functions）

返回值，不输出 CSS。

自定义函数

less 复制代码

@function to-rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

.text {
  font-size: to-rem(24px); // → 1.5rem
}

内置函数示例

css 复制代码

$color: #3498db;
.lighter: lighten($color, 20%);     // 变亮
.darker: darken($color, 10%);       // 变暗
.transparent: transparentize($color, 0.3); // 增加透明度

11. 模块系统（@use 与 @forward）

✅ 取代旧的 @import（已废弃）

`@use`：导入模块

css 复制代码

// _variables.scss
$primary: #3498db;

// main.scss
@use 'variables';

.alert {
  color: variables.$primary;
}

命名空间别名

kotlin 复制代码

@use 'variables' as var;
color: var.$primary;

无命名空间（谨慎使用）

less 复制代码

@use 'variables' as *;
color: $primary; // 直接使用

`@forward`：重新导出

less 复制代码

// _all.scss
@forward 'buttons';
@forward 'forms';

// main.scss
@use 'all';

12. 内置模块与函数

Sass 提供多个内置模块（需显式 @use）：

less 复制代码

@use 'sass:math';
@use 'sass:string';
@use 'sass:color';
@use 'sass:list';
@use 'sass:map';
@use 'sass:selector';

示例：数学运算

scss 复制代码

@use 'sass:math';

$half: math.div(10, 2); // 5

⚠️ 注意：/ 不再表示除法！必须用 math.div()。

13. 最佳实践

建议	说明
✅ 使用 `@use` 而非 `@import`	避免全局污染，提升性能
✅ 变量命名语义化	`$button-primary-bg` 优于 `$blue`
✅ 限制嵌套层级	≤ 3 层，避免低效选择器
✅ 用 `%placeholder` 替代无意义类	减少 CSS 体积
✅ 拆分文件（7-1 模式）	`base/`, `components/`, `layout/` 等
✅ 使用 linter（如 stylelint）	保证代码规范

14. 常见陷阱与性能优化

❌ 陷阱

过度嵌套 → 生成冗长选择器
滥用 @extend → 选择器爆炸
在循环中生成大量 CSS → 文件膨胀
使用 !global → 难以维护

✅ 优化

使用 @if 控制 mixin 输出
合并相似样式到 mixin
压缩输出：--style=compressed
利用 source map 调试

15. 工具与生态

工具	用途
Sass Playground	在线实时编译
stylelint-scss	Lint 规则
PostCSS + Sass	后处理增强
VS Code 插件	Live Sass Compiler、SCSS IntelliSense

📌 总结

SCSS 极大地提升了 CSS 的可维护性与开发效率。掌握其核心特性（变量、嵌套、mixin、模块化）后，你将能构建可扩展、可复用、高性能的样式系统。

🔗 官方文档：sass-lang.com/documentati...

📘 中文参考：www.sass.hk

📚 最新版 SCSS（Sass）完整教程（2026 年版）