Sass 变量（超详细）

什么是 Sass 变量？为什么它对前端开发如此重要？

在现代前端开发中，CSS 已经不再是简单的“样式表”了。它需要应对响应式设计、主题切换、组件复用等复杂场景。而 Sass 变量，正是让 CSS 变得更智能、更灵活的核心工具之一。

你可以把 Sass 变量想象成一个“样式仓库”的标签。比如，你定义了一个颜色变量 $primary-color: #007BFF;，以后所有使用这个颜色的地方，都可以直接引用这个标签，而不是硬编码 #007BFF。这样一来，当你想改主色调时，只需修改一个地方，所有依赖它的样式都会自动更新。

这不仅减少了重复代码，还极大提升了开发效率和维护性。尤其在大型项目中，Sass 变量的价值更是不可估量。

如何声明和使用 Sass 变量？

Sass 变量的语法非常直观。你只需要在变量名前加一个 $ 符号，然后用冒号 : 分隔变量名和值。

// 声明一个颜色变量
$primary-color: #007BFF;

// 声明一个字体大小变量
$font-size-base: 16px;

// 声明一个边距变量
$spacing-large: 2rem;

注释：以上代码定义了三个常用的 Sass 变量，分别用于存储主色调、基础字体大小和大间距值。这些变量可以在整个 Sass 文件中被多次引用。

使用变量也很简单，只需要在 CSS 属性中直接引用变量名即可：

.button {
  background-color: $primary-color; // 使用主色调作为按钮背景
  color: white;
  font-size: $font-size-base;       // 使用基础字体大小
  padding: $spacing-large;         // 使用大间距
  border: 2px solid $primary-color; // 边框也用主色调
}

注释：这里的 .button 类通过引用之前定义的变量，实现了样式的一致性和可维护性。如果将来要更换主色，只需修改 $primary-color 的值，所有依赖它的元素都会自动更新。

变量的作用域：你可能忽略的关键点

Sass 变量有一个非常重要的特性：作用域。理解这一点，能避免很多“变量没生效”的奇怪问题。

在 Sass 中，变量的作用域遵循“就近原则”——如果在一个局部块（如嵌套的 @mixin 或 @if）中定义了同名变量，它会覆盖外层的同名变量。

$color: red;

.container {
  $color: blue; // 局部变量，仅在此块内生效

  p {
    color: $color; // 输出蓝色
  }

  .inner {
    color: $color; // 仍然是蓝色，因为作用域在 .container 内
  }
}

// 外层的 $color 仍然是 red
p {
  color: $color; // 输出红色
}

注释：这段代码展示了变量的作用域机制。.container 内部定义的 $color 是局部变量，不影响外部的 $color。这种机制让你可以在不同模块中安全地使用同名变量，而不会产生冲突。

常用变量类型与最佳实践

Sass 支持多种数据类型，包括颜色、数字、字符串、布尔值、列表和映射（map）。每种类型都适合不同的使用场景。

颜色变量：统一设计系统的核心

颜色是 UI 设计中最频繁使用的样式属性。使用变量管理颜色，能确保品牌一致性。

// 定义一套基础颜色变量
$primary: #007BFF;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;

注释：这些变量构成了一个完整的设计系统色彩体系。在项目中，任何使用颜色的地方都应优先引用这些变量，而不是直接写十六进制值。

字体与间距变量：提升可读性与一致性

字体大小和间距是决定页面布局美感的关键因素。

// 字体层级变量
$font-size-xs: 0.75rem;
$font-size-sm: 0.875rem;
$font-size-base: 1rem;
$font-size-lg: 1.25rem;
$font-size-xl: 1.5rem;

// 间距变量（使用 rem，便于响应式）
$spacing-xs: 0.25rem;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 2rem;

注释：通过定义层级化的字体和间距变量，可以轻松实现“设计语言”的统一。比如，所有标题都使用 $font-size-lg，所有按钮内边距使用 $spacing-md。

变量在混合宏（Mixin）中的应用

Sass 的混合宏（@mixin）和变量结合使用，能实现高度复用的组件逻辑。

// 定义一个按钮混合宏，支持自定义颜色
@mixin button-style($bg-color: $primary, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  border: 1px solid darken($bg-color, 10%);
  padding: $spacing-sm $spacing-md;
  font-size: $font-size-sm;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: darken($bg-color, 15%);
  }
}

// 使用混合宏创建不同风格的按钮
.primary-btn {
  @include button-style($primary, white);
}

.danger-btn {
  @include button-style($danger, white);
}

.outline-btn {
  @include button-style(transparent, $primary);
  border: 2px solid $primary;
}

注释：这个 button-style 混合宏利用了变量的默认值机制。如果没有传参，会使用默认的 $primary 颜色。通过传递不同参数，可以生成多种样式的按钮，极大减少重复代码。

实际项目中的 Sass 变量管理策略

在真实项目中，建议将所有变量集中管理，形成一个“变量库”。

创建变量文件：_variables.scss

// _variables.scss —— 全局变量库
// 定义所有颜色、字体、间距、动画等基础变量

// 颜色系统
$primary: #007BFF;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;

// 字体系统
$font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-size-base: 1rem;
$font-size-lg: 1.25rem;
$font-size-sm: 0.875rem;

// 间距系统
$spacing-xs: 0.25rem;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 2rem;

// 响应式断点
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

在主样式文件中导入变量

// style.scss —— 主入口文件
@import 'variables'; // 导入变量库

.header {
  background-color: $primary;
  color: white;
  padding: $spacing-lg;
  font-size: $font-size-lg;
}

@media (max-width: $breakpoint-md) {
  .header {
    font-size: $font-size-base;
  }
}

注释：这种“分离变量”的模式是大型项目的标准实践。它让样式管理更清晰，也便于团队协作。任何修改都集中在 _variables.scss 中完成。

常见问题与避坑指南

1. 变量未生效？检查是否定义了

有时候你引用了变量，但样式没变化，可能是因为变量名拼错或未定义。建议使用 IDE 的语法高亮功能辅助识别。

2. 变量命名规范

建议使用小写下划线命名法，如 $primary-color，避免驼峰命名（如 $primaryColor），因为 Sass 对大小写不敏感，容易出错。

3. 避免过度嵌套变量

虽然 Sass 支持嵌套变量（如 $theme-primary-color），但层级过深会降低可读性。建议保持扁平结构，使用清晰的命名即可。

4. 与 CSS 变量的对比

Sass 变量是编译时替换，而 CSS 变量（--var）是运行时生效。两者各有优势。Sass 变量更适合构建阶段的样式处理，而 CSS 变量更适合动态主题切换。

结语

Sass 变量不是“高级技巧”，而是现代前端开发中必须掌握的基础能力。它让你从“写样式”转变为“设计样式系统”，让代码更健壮、更易维护。

无论是初学者还是有经验的开发者，都应该尽早掌握 Sass 变量的使用。它不仅提升了开发效率，更让你的代码具备了“可扩展性”和“可维护性”的基因。

当你在项目中看到“一个颜色改了，全站变色”的效果时，背后很可能就是 Sass 变量在默默工作。掌握它，你就掌握了控制整个设计语言的钥匙。