[!info] related notes

• 所属 MOC: css-moc
• 前置概念: css
• 并列概念: postcss, unocss
• 关系笔记:

Sass / SCSS

一句话定义

Sass 是一种 CSS 预处理器，SCSS 是 Sass 最常用的一种语法（CSS 超集），需编译为 CSS 后浏览器才能识别。

核心内容

Sass 与 SCSS 的关系

• Sass：工具/语言的总称，全称 Syntactically Awesome Style Sheets
• SCSS：Sass 的一种语法（Sassy CSS），使用 {} 和 ;，与 CSS 基本兼容
• 缩进式 Sass：另一种老语法（.sass），用缩进代替大括号，现已较少使用

// SCSS 语法（主流）
$primary: #409eff;
.button { color: $primary; }

// 缩进式 Sass（老式）
$primary: #409eff
.button
  color: $primary

核心能力

1. 变量

$primary-color: #409eff;
$border-radius: 8px;

.card {
  border-radius: $border-radius;
  background: $primary-color;
}

2. 嵌套

.nav {
  display: flex;
  .nav-item {
    a {
      color: #333;
      &:hover { color: blue; }
    }
  }
}

& 表示当前选择器本身，常用于 BEM 命名：

.button {
  &-primary { background: blue; }
  &:hover { opacity: 0.8; }
}

3. Mixin（混入）

可带参数的样式模板：

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-style($bg, $text: white) {
  background: $bg;
  color: $text;
  padding: 8px 16px;
}

.box { @include flex-center; }
.btn { @include button-style(blue); }

4. 继承 @extend

%btn-base {
  padding: 8px 16px;
  border-radius: 6px;
}
.btn-primary { @extend %btn-base; background: blue; }

5. 函数 @function

@function px2rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}
.title { font-size: px2rem(24px); }

6. 模块化 @use / @forward

现代 Sass 推荐 @use 替代 @import：

@use "variables" as v;
.button { color: v.$primary-color; }

@forward 用于转发模块，适合做统一出口：

// _index.scss
@forward "variables";
@forward "mixins";

7. 控制语句

@for $i from 1 through 3 {
  .mt-#{$i} { margin-top: $i * 4px; }
}

@each $name, $color in (primary blue, danger red) {
  .btn-#{$name} { background: $color; }
}

8. 插值 #{}

动态拼接选择器或属性名：

$size: 20;
.icon-#{$size} {
  width: #{$size}px;
}

Sass 变量 vs CSS 变量

	Sass 变量 $var	CSS 变量 --var
生效时机	编译时	运行时
JS 可否修改	否	是
适用场景	静态组织、工程化	动态主题切换

实际项目常两者结合：

$primary-light: #1677ff;
:root { --primary-color: #{$primary-light}; }
.button { background: var(--primary-color); }

在项目中使用

Vue SFC：

<style lang="scss" scoped>
.container { .title { color: red; } }
</style>

Vite / Webpack：

import './index.scss'

安装 Sass 后构建工具自动编译。

Partial 文件

以下划线开头的文件（如 _variables.scss）是局部文件，只用于被引入，不单独编译输出。

边界与易混淆点

• Sass/SCSS 需要编译，浏览器不能直接识别
• 嵌套不宜超过 2-3 层，否则选择器过深
• @extend 会生成复杂选择器，简单复用优先用 mixin
• @import 已不推荐，新项目优先用 @use / @forward
• 原生 CSS 正逐步支持嵌套、@layer 等特性，Sass 定位更偏向工程化管理

信息参考

• Sass 官方文档
• Sass @use 规范

Related notes

• CSS MOC