变量系统

Kpsmart2025年3月5日大约 12 分钟

SCSS/SASS变量系统

变量是Sass最基础也是最强大的特性之一，它让CSS真正具备了编程语言的特性。通过变量，我们可以存储和重用颜色、字体、尺寸等值，使样式表更加一致、可维护，并且易于全局修改。想象一下，只需修改一处定义，就能更新整个网站的主题色彩——这正是Sass变量的魅力所在。

为什么需要变量？

在传统CSS中，如果你想在多个地方使用相同的值（如品牌颜色），你必须在每个需要的地方重复这个值。这导致了几个问题：

重复代码：同一个值可能在样式表中出现几十甚至上百次
维护困难：当需要修改时，必须搜索并替换所有出现的地方
一致性挑战：手动维护相同值容易出错，导致不一致

Sass变量解决了这些问题，它允许你定义一次值，然后在整个样式表中引用它。当需要更改时，只需修改变量定义，所有使用该变量的地方都会自动更新。

变量定义与使用

基本语法

Sass变量使用$符号定义，可以存储颜色、字符串、数字等值：

$primary-color: #007bff;
$font-stack: Arial, sans-serif;
$base-padding: 15px;

.button {
  background-color: $primary-color;
  font-family: $font-stack;
  padding: $base-padding;
}

这个简单的例子展示了变量的基本用法：定义三个变量，然后在.button选择器中使用它们。如果以后需要更改主色调，只需修改$primary-color的值，所有使用该变量的地方都会更新。

数据类型

Sass的类型系统比CSS更加丰富，了解这些类型有助于更有效地使用变量和函数。Sass支持以下数据类型：

数字：包含或不包含单位
```
$width: 100px;
$line-height: 1.5;
```
数字可以进行数学运算，如$width / 2或$line-height * 1.2。带单位的数字在运算时会考虑单位兼容性。
字符串：有引号或无引号
```
$heading-font: "Helvetica Neue";
$font-weight: bold;
```
在大多数情况下，有引号和无引号的字符串可以互换使用，但在某些情况下（如包含空格的字符串），引号是必需的。
颜色：多种表示方式
```
$brand-color: #3ab;
$accent-color: rgb(255, 128, 0);
$background: rgba(0, 0, 0, 0.5);
$highlight: hsl(120, 100%, 50%);
```
Sass提供了丰富的颜色函数，如lighten()、darken()、mix()等，可以基于已有颜色创建新的颜色变体。
布尔值
```
$is-important: true;
$is-centered: false;
```
布尔值通常用于条件语句中，如@if $is-important { ... }。
空值
```
$empty-value: null;
```
null表示没有值，通常用于条件逻辑或与!default标志结合使用。
列表：用空格或逗号分隔
```
$padding: 10px 15px 20px 25px;
$fonts: Arial, Helvetica, sans-serif;
```
列表可以存储多个值，可以通过索引访问单个项，如nth($padding, 2)返回15px。
映射：键值对集合
```
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745
);
```
映射是Sass中最复杂的数据类型，可以通过map-get($theme-colors, "primary")获取值。它们特别适合存储相关值的集合，如主题配置。

了解这些数据类型及其操作方法，可以帮助你编写更加灵活和强大的Sass代码。

作用域规则

Sass变量遵循作用域规则，理解这些规则对于避免意外覆盖和管理复杂样式表至关重要。

全局变量

在选择器、函数或混入之外声明的变量具有全局作用域，可以在整个样式表中访问：

$global-color: #333; // 全局变量

.container {
  color: $global-color; // 可以访问全局变量
}

@mixin theme {
  background: $global-color; // 也可以访问全局变量
}

全局变量适合存储整个项目中需要一致使用的值，如品牌颜色、基础字体大小等。

局部变量

在选择器、函数或混入中声明的变量具有局部作用域，只能在声明它们的块内访问：

.container {
  $local-padding: 20px; // 局部变量
  padding: $local-padding;
  
  .inner {
    margin: $local-padding / 2; // 嵌套选择器可以访问父选择器的局部变量
  }
}

.other {
  // padding: $local-padding; // 错误：无法访问局部变量
}

局部变量有助于避免命名冲突，并使代码更加模块化。它们特别适合只在特定组件或功能中使用的值。

变量覆盖

局部变量可以覆盖同名的全局变量，但覆盖仅在局部作用域内有效：

$color: blue; // 全局变量

.container {
  $color: red; // 局部变量覆盖全局变量
  background: $color; // 使用红色
  
  .nested {
    border: 1px solid $color; // 也使用红色
  }
}

.other {
  background: $color; // 使用蓝色（全局变量）
}

这种机制允许你在特定上下文中修改变量值，而不影响其他地方的使用。

!global标志

如果你想在局部作用域中修改全局变量，可以使用!global标志：

$color: blue; // 全局变量

.container {
  $color: red !global; // 修改全局变量
  background: $color; // 使用红色
}

.other {
  background: $color; // 也使用红色，因为全局变量已被修改
}

谨慎使用!global，因为它可能导致难以追踪的副作用。通常，最好避免在局部作用域中修改全局状态。

默认值

Sass提供了一种机制，允许你设置变量的默认值，同时允许用户覆盖这些值。这在创建可配置的库或框架时特别有用。

!default标志

使用!default可以设置变量的默认值，只有当变量未定义或值为null时才会生效：

// _config.scss
$brand-color: #007bff !default;
$font-size: 16px !default;

// main.scss
$brand-color: #ff0000; // 覆盖默认值
@import 'config';

.button {
  background-color: $brand-color; // 使用红色
  font-size: $font-size; // 使用16px
}

在这个例子中，main.scss在导入_config.scss之前定义了$brand-color，所以默认值不会生效。但$font-size没有被预先定义，所以使用了默认值。

实际应用

!default标志在创建可配置的主题或组件库时特别有用，它允许用户自定义样式而不需要修改原始代码：

// _theme.scss（库文件）
$primary: #007bff !default;
$secondary: #6c757d !default;
$success: #28a745 !default;
$border-radius: 4px !default;

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

// custom.scss（用户文件）
// 用户可以在导入前覆盖这些值
$primary: #ff0000;
$border-radius: 0;
@import 'theme';

这种模式被Bootstrap等流行框架广泛使用，它允许用户通过覆盖变量来自定义主题，而不需要修改框架的源代码。

插值语法

Sass变量通常直接用于属性值，但有时我们需要在选择器名称、属性名或其他不接受变量的地方使用变量值。这时就需要插值语法。

基本用法

使用#{$variable}语法在选择器和属性名中插入变量值：

$component: "button";
$property: "margin";
$side: "left";

.#{$component} {
  #{$property}-#{$side}: 10px;
}

// 编译为：
.button {
  margin-left: 10px;
}

插值使得动态生成选择器和属性名成为可能，这在创建灵活的组件系统时非常有用。

高级应用

插值在与控制指令（如循环）结合使用时特别强大，可以生成重复的样式模式：

$breakpoint: 768px;
$columns: 12;

@media screen and (min-width: #{$breakpoint}) {
  @for $i from 1 through $columns {
    .col-#{$i} {
      width: percentage($i / $columns);
    }
  }
}

// 编译为：
@media screen and (min-width: 768px) {
  .col-1 {
    width: 8.33333%;
  }
  .col-2 {
    width: 16.66667%;
  }
  /* ... 更多列 ... */
  .col-12 {
    width: 100%;
  }
}

这个例子展示了如何使用插值和循环生成一个完整的网格系统，类似于Bootstrap的网格。

字符串拼接

插值也可以用于字符串拼接，创建动态的字符串值：

$direction: "left";
$property: "margin";
$value: 10px;

.element {
  #{$property}-#{$direction}: $value;
  content: "This element has a #{$property} of #{$value}";
}

// 编译为：
.element {
  margin-left: 10px;
  content: "This element has a margin of 10px";
}

计算与操作

Sass变量不仅可以存储静态值，还可以参与计算和操作，使样式表更加动态和灵活。

数学运算

Sass支持基本的数学运算，如加、减、乘、除和取模：

$base-size: 16px;
$spacing: 8px;

.element {
  font-size: $base-size * 1.5;
  padding: $spacing * 2;
  width: 100% - 20px;
  height: (100px / 2);
  margin: $spacing + 5px;
}

注意：除法操作在Sass中有特殊规则，有时需要使用括号或math.div()函数（在新版本中）。

颜色操作

Sass提供了丰富的颜色函数，允许你基于现有颜色创建新的颜色变体：

$base-color: #3498db;

.element {
  background-color: $base-color;
  border-color: darken($base-color, 10%);
  color: lighten($base-color, 40%);
}

.accent {
  background-color: mix($base-color, #e74c3c, 30%);
  color: complement($base-color);
}

这些颜色函数使得创建和谐的配色方案变得简单，无需手动计算颜色值。

字符串操作

Sass也支持字符串操作，如连接和插入：

$prefix: "btn";
$theme: "primary";

.#{$prefix}-#{$theme} {
  content: "This is a " + $theme + " button";
}

最佳实践

经过多年的实践，Sass社区已经形成了一套关于变量使用的最佳实践。遵循这些实践可以使你的代码更加清晰、一致和可维护。

1. 变量命名规范

良好的变量命名对于代码可读性和维护性至关重要：

使用描述性名称：选择能清楚表达变量用途的名称，如$primary-color而非$color1
采用一致的命名风格：推荐使用kebab-case（如$font-size-large），与CSS属性命名风格一致
按功能或模块组织变量：使用前缀或命名空间区分不同类别的变量，如$btn-padding、$header-height、$form-border-radius等
使用有意义的前缀：对相关变量使用共同前缀，如$font-size-small、$font-size-medium、$font-size-large

2. 变量文件组织

在大型项目中，合理组织变量定义文件可以显著提高代码的可维护性：

创建专门的变量文件：将所有变量定义集中在专门的文件中，如_variables.scss
按类别分组：在变量文件中，按照颜色、排版、间距等类别组织变量
使用注释分隔：用注释清晰标记不同变量组，提高可读性

// _variables.scss

// 颜色系统
// ---------------------------
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;

// 排版
// ---------------------------
$font-family-base: 'Helvetica Neue', Arial, sans-serif;
$font-size-base: 16px;
$line-height-base: 1.5;

// 间距
// ---------------------------
$spacing-unit: 8px;
$spacing-small: $spacing-unit;
$spacing-medium: $spacing-unit * 2;
$spacing-large: $spacing-unit * 3;

3. 模块化与命名空间

随着项目规模增长，变量命名冲突的风险也会增加。使用模块化和命名空间可以有效避免这个问题：

使用@use规则：在Dart Sass中，使用@use替代@import来引入变量，这会自动创建命名空间
命名空间前缀：为不同模块的变量使用一致的前缀，如$button-、$form-等
避免过度全局化：只将真正需要全局共享的变量放在全局作用域

// _buttons.scss
$button-padding: 10px 15px;
$button-border-radius: 4px;

// _forms.scss
$form-padding: 15px;
$form-border-radius: 4px;

// main.scss
@use 'buttons';
@use 'forms';

.custom-button {
  padding: buttons.$button-padding;
  border-radius: buttons.$button-border-radius;
}

.custom-form {
  padding: forms.$form-padding;
  border-radius: forms.$form-border-radius;
}

4. 默认值与配置

创建可配置的组件和库时，合理使用默认值可以提高灵活性：

为所有可配置项设置默认值：使用!default标志为所有可配置的变量提供合理的默认值
集中配置：创建专门的配置文件，方便用户一次性覆盖多个默认值
文档化：为每个可配置变量提供清晰的注释，说明其用途和可能的值

// _config.scss
// 主色调，用于按钮、链接和强调元素
$primary-color: #007bff !default;

// 次要色调，用于次要按钮和辅助元素
$secondary-color: #6c757d !default;

// 基础字体大小，所有相对单位的基准
$base-font-size: 16px !default;

// 基础行高，适用于正文内容
$base-line-height: 1.5 !default;

5. 避免硬编码值

一致使用变量可以提高代码的可维护性和一致性：

抽象常用值：将重复出现的值（如颜色、尺寸）抽象为变量
使用计算而非硬编码：基于基础变量计算派生值，而非直接硬编码
避免魔法数字：不要使用没有明确含义的数字，如margin-top: 37px;

// 不推荐
.button {
  padding: 10px 15px;
  background-color: #007bff;
  border-radius: 4px;
}

.card {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

// 推荐
$padding-base: 5px;
$primary-color: #007bff;
$background-light: #f8f9fa;
$border-radius: 4px;

.button {
  padding: $padding-base * 2 $padding-base * 3;
  background-color: $primary-color;
  border-radius: $border-radius;
}

.card {
  padding: $padding-base * 3;
  background-color: $background-light;
  border-radius: $border-radius;
}

实际案例：主题系统

变量系统的一个强大应用是创建可切换的主题。下面是一个实际案例，展示如何使用Sass变量构建灵活的主题系统：

基础主题变量

// _themes.scss

// 亮色主题（默认）
$light-theme: (
  'background': #ffffff,
  'text': #333333,
  'primary': #007bff,
  'secondary': #6c757d,
  'border': #dee2e6,
  'shadow': rgba(0, 0, 0, 0.1)
);

// 暗色主题
$dark-theme: (
  'background': #121212,
  'text': #f8f9fa,
  'primary': #4dabf7,
  'secondary': #adb5bd,
  'border': #495057,
  'shadow': rgba(255, 255, 255, 0.1)
);

// 当前主题（默认为亮色）
$current-theme: $light-theme !default;

// 获取主题变量的函数
@function theme($key) {
  @return map-get($current-theme, $key);
}

使用主题变量

// _components.scss
@use 'themes' as *;

.card {
  background-color: theme('background');
  color: theme('text');
  border: 1px solid theme('border');
  box-shadow: 0 2px 4px theme('shadow');
  
  .card-title {
    color: theme('primary');
  }
  
  .card-subtitle {
    color: theme('secondary');
  }
}

.button {
  background-color: theme('primary');
  color: theme('background');
  border: none;
  
  &:hover {
    background-color: darken(theme('primary'), 10%);
  }
}

切换主题

// light-theme.scss
@use 'themes' with (
  $current-theme: $light-theme
);
@use 'components';

// dark-theme.scss
@use 'themes' with (
  $current-theme: $dark-theme
);
@use 'components';

这个例子展示了如何使用Sass变量、映射和函数创建一个完整的主题系统。用户可以通过切换CSS文件或使用JavaScript动态加载不同的主题样式表来改变网站的外观。

总结

Sass变量系统是CSS预处理的核心功能之一，它为样式表带来了真正的编程能力。通过合理使用变量，你可以：

提高代码可维护性：集中管理常用值，一处修改，处处生效
增强样式一致性：确保整个项目使用一致的颜色、字体和间距
创建灵活的组件：构建可配置的组件和主题系统
减少重复代码：抽象共同值，减少冗余

掌握Sass变量系统不仅能让你编写更高效的CSS，还能为你的项目带来更好的可扩展性和可维护性。随着项目规模的增长，这些优势将变得越发明显。

无论是个人项目还是大型团队协作，良好的变量管理都是成功的Sass项目的基石。通过遵循本文介绍的最佳实践，你可以充分发挥Sass变量系统的强大功能，创建更加专业和高效的样式表。