Sass 变量（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在前端开发中，CSS 的可维护性一直是一个重要挑战。随着项目复杂度的增加，重复代码、样式冲突等问题会逐渐暴露。Sass（Syntactically Awesome Style Sheets）作为 CSS 的预处理器，通过引入变量、嵌套、混合等特性，显著提升了代码的组织效率。其中，Sass 变量是最基础且实用的功能之一。它允许开发者将常用值（如颜色、字体、间距等）存储为可复用的标识符，从而减少重复劳动，降低修改成本。本文将从基础到进阶，结合实际案例，带读者全面理解 Sass 变量 的使用方法与价值。

Sass 变量的基础语法与核心概念

1. 变量的定义与使用

在 Sass 中，变量以 $ 符号开头，遵循 变量名: 值; 的语法结构。例如：

$primary-color: #3498db;  
$font-size-base: 16px;  

使用时只需通过变量名直接引用：

body {  
  color: $font-size-base;  
  background-color: $primary-color;  
}  

关键点：

• 变量名需以 $ 开头，且遵循 CSS 的命名规则（如 snake-case 或 kebab-case）。
• 变量值可以是任何 CSS 允许的值（颜色、数字、字符串等），甚至可以是其他变量的组合。

2. 变量的作用域

Sass 变量具有局部作用域和全局作用域的特性，这决定了变量的可见范围：

• 全局变量：在顶级作用域（非嵌套在选择器内）定义的变量，可在整个文件或导入的其他 Sass 文件中访问。
• 局部变量：在嵌套的选择器或控制指令（如 @each、@for）内定义的变量，仅在该作用域内有效。

示例：

// 全局变量  
$global-var: "I'm global!";  

.header {  
  $local-var: "I'm local!"; // 局部变量  
  content: $local-var; // 正确输出  
}  

// 在全局作用域中尝试访问局部变量会报错  
content: $local-var; // 错误！  

作用域的比喻：
可以将全局变量想象为团队共享的云盘，所有成员都能访问；而局部变量则像个人电脑中的文件夹，只有进入该文件夹的人才能看到内容。

Sass 变量的最佳实践

1. 命名规范：清晰与一致性

变量名的命名需兼顾可读性和一致性。建议采用以下规则：

• 使用 $ 开头，后接 snake-case（如 $primary_color）或 kebab-case（如 $font-size-base）。
• 对于颜色、间距等常见类型，可添加类型前缀（如 $color-primary、$spacing-large）。

示例：

$color-primary: #3498db;  
$spacing-small: 8px;  
$font-family-sans-serif: "Arial", sans-serif;  

2. 集中管理变量：创建主题文件

将变量集中存储在独立的 .scss 文件中（如 _variables.scss），并通过 @import 引入到主文件。这样可以：

• 统一修改全局样式（如更换品牌色）。
• 避免变量定义重复或冲突。

示例目录结构：

styles/  
├── _variables.scss  
├── base.scss  
└── components.scss  

主题文件示例：

// _variables.scss  
$primary-color: #3498db;  
$secondary-color: #2c3e50;  
$font-size-base: 16px;  
$breakpoints: (  
  mobile: 480px,  
  tablet: 768px,  
  desktop: 1024px  
);  

Sass 变量与 CSS 变量的区别

虽然 CSS 自定义属性（CSS 变量）与 Sass 变量 功能相似，但两者存在本质差异：

示例对比：

// Sass 变量  
$base: 10px;  
$double: $base * 2; // 直接计算为 20px  

// CSS 变量  
:root {  
  --base: 10px;  
}  
.double {  
  font-size: calc(var(--base) * 2); // 需通过 calc() 计算  
}  

Sass 变量的进阶用法

1. 变量默认值与动态绑定

在函数或混合宏（@mixin）中，可以通过 !default 标志为变量设置默认值，允许用户覆盖：

// 默认值设定  
$font-size: 16px !default;  

body {  
  font-size: $font-size;  
}  

使用场景：当多个 Sass 文件共享变量时，!default 可避免覆盖已定义的值，提升可扩展性。

2. 变量作为函数参数

变量可以作为函数的参数传递，实现动态样式生成：

@function scale($base, $factor) {  
  @return $base * $factor;  
}  

.button {  
  font-size: scale($font-size-base, 1.5); // 输出 24px  
}  

3. 变量与地图（Maps）的结合

Sass 的 map 数据结构允许将多个键值对存储为变量，便于复杂配置的管理：

// 定义颜色地图  
$colors: (  
  primary: #3498db,  
  secondary: #2c3e50,  
  success: #2ecc71  
);  

// 使用 map-get() 获取值  
.primary-btn {  
  background-color: map-get($colors, primary);  
}  

实战案例：构建可维护的主题系统

场景：电商网站的主题色切换

假设我们需要为一个电商网站设计两种主题（默认蓝与活力橙），通过 Sass 变量 实现快速切换。

步骤 1：定义主题变量

// _variables.scss  
$themes: (  
  default: (  
    primary: #3498db,  
    secondary: #2c3e50  
  ),  
  vibrant: (  
    primary: #ff5722,  
    secondary: #ff9800  
  )  
);  

// 默认启用 default 主题  
$current-theme: map-get($themes, default);  

步骤 2：创建主题函数

@function get-theme-color($key) {  
  @return map-get(map-get($themes, $current-theme), $key);  
}  

步骤 3：应用主题到样式

// 默认主题  
body {  
  color: get-theme-color(primary);  
  background-color: get-theme-color(secondary);  
}  

// 切换主题（如在 JavaScript 中修改变量）  
// $current-theme: map-get($themes, vibrant);  

优势：

• 修改主题时只需调整 $current-theme 的值，所有样式会自动更新。
• 新增主题只需扩展 $themes 地图，无需修改现有代码。

常见问题与注意事项

1. 变量未定义的错误

如果尝试引用未定义的变量，Sass 会报错。解决方案：

• 确保变量在作用域内已定义。
• 使用 !global 标志强制覆盖全局变量（谨慎使用）。

// 错误示例  
.content {  
  color: $undefined-var; // 报错！  
}  

2. 作用域陷阱

局部变量可能意外覆盖全局变量：

$color: red;  

.button {  
  $color: blue; // 局部覆盖  
  background-color: $color; // 输出 blue  
}  

.alert {  
  background-color: $color; // 输出 red  
}  

解决方案：在定义局部变量时，使用更具描述性的名称以避免冲突。

结论

Sass 变量 是提升 CSS 可维护性、减少重复代码的核心工具。通过集中管理颜色、间距、字体等基础样式，开发者可以更专注于设计逻辑，而非琐碎的值修改。结合地图、函数等高级特性，变量还能实现动态主题、响应式布局等复杂功能。对于初学者，建议从基础语法开始，逐步尝试变量与地图的组合使用；中级开发者则可探索变量在复杂项目中的作用域管理与性能优化。

掌握 Sass 变量，不仅能提升编码效率，更能培养模块化、可扩展的代码思维，为构建大型前端项目打下坚实基础。