Lzh on GitHub

变量

Sass 变量很简单：你将一个值赋给一个以 $ 开头的名称，然后你可以使用该名称来代替值本身。尽管它们很简单，但它们是 Sass 最有用的工具之一。变量使得减少重复、进行复杂的数学运算、配置库等等成为可能。

Sass 变量很简单：你将一个值赋给一个以 $ 开头的名称，然后你可以使用该名称来代替值本身。尽管它们很简单，但它们是 Sass 最有用的工具之一。变量使得减少重复、进行复杂的数学运算、配置库等等成为可能。

变量声明看起来很像属性声明：它的写法是 <变量>: <表达式>。与只能在样式规则或 at-rule 中声明的属性不同，变量可以在任何你想要的地方声明。要使用变量，只需将其包含在值中即可。

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}
CSS 有自己的 变量，它们与 Sass 变量完全不同。了解它们之间的区别！
  • Sass 变量全部由 Sass 编译掉。CSS 变量包含在 CSS 输出中。
  • CSS 变量可以为不同的元素设置不同的值，但 Sass 变量一次只有一个值。
  • Sass 变量是命令式的，这意味着如果你使用一个变量然后更改它的值，之前的用途将保持不变。CSS 变量是声明式的，这意味着如果你更改了值，它会影响之前和之后的用途。
$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}
Sass 变量，像所有 Sass 标识符一样，将连字符和下划线视为相同。这意味着 $font-size 和 $font_size 都引用同一个变量。这是 Sass 早期的一个历史遗留问题，当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配 CSS 的语法，两者就被设置为等效，以使迁移更容易。

默认值

通常，当你为一个变量赋值时，如果该变量已经有值，它的旧值就会被覆盖。但如果你正在编写一个 Sass 库，你可能希望允许用户在将变量用于生成 CSS 之前配置你的库的变量。

为了实现这一点，Sass 提供了 !default 标志。这个标志只在该变量未定义或其值为 null 时才为变量赋值。否则，将使用现有值。

配置模块

使用 !default 定义的变量可以在使用 @use 规则加载模块时进行配置。Sass 库通常使用 !default 变量来允许其用户配置库的 CSS。

要加载带有配置的模块，请编写 @use with (<变量>: <值>, <变量>: <值>)。配置的值将覆盖变量的默认值。只有在样式表顶层使用 !default 标志编写的变量才能被配置。

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

内置变量

由内置模块定义的变量无法修改。

@use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;

作用域

在样式表顶层声明的变量是全局的。这意味着它们在声明后可以在其模块中的任何地方被访问。但并非所有变量都是如此。在代码块（SCSS 中的花括号或 Sass 中的缩进代码）中声明的变量通常是局部的，并且只能在声明它们的代码块中被访问。

$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable;
}

遮蔽

局部变量甚至可以用与全局变量相同的名称声明。如果发生这种情况，实际上有两个具有相同名称的不同变量：一个局部的和一个全局的。这有助于确保作者在编写局部变量时不会意外更改他们甚至不知道的全局变量的值。

$variable: global value;

.content {
  $variable: local value;
  value: $variable;
}

.sidebar {
  value: $variable;
}

如果你需要从局部作用域（例如在混合宏中）设置全局变量的值，你可以使用 !global 标志。一个标记为 !global 的变量声明总是会赋值给全局作用域。

$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}
!global 标志只能用于设置已在文件顶层声明的变量。它不能用于声明一个新变量。

流控制作用域

在流控制规则中声明的变量具有特殊的作用域规则：它们不会遮蔽与流控制规则处于同一级别的变量。相反，它们只是给那些变量赋值。这使得有条件地为一个变量赋值，或者在循环中累积一个值变得容易得多。

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}
流控制作用域中的变量可以赋值给外部作用域中已存在的变量，但在流控制作用域中声明的新变量在外部作用域中将无法访问。请确保在赋值之前该变量已经声明，即使你需要将其声明为 null。

高级变量函数

Sass 核心库提供了一些用于处理变量的高级函数。meta.variable-exists() 函数返回当前作用域中是否存在给定名称的变量，而 meta.global-variable-exists() 函数的作用相同，但只针对全局作用域。

用户有时希望使用插值来根据另一个变量定义变量名。Sass 不允许这样做，因为它会使你很难一眼看出哪些变量在哪里被定义了。但是，你可以定义一个从名称到值的映射，然后使用变量来访问它。
@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");