变量 ​

Sass变量非常简单：您将一个值赋给一个以$开头的名称，然后您可以引用该名称而不是值本身。尽管它们很简单，但它们是Sass带来的最有用的工具之一。变量可以减少重复，进行复杂的数学计算，配置库等。

通过使用变量，您可以轻松管理和维护样式表中的颜色、字体大小、间距等值。这使得在项目中保持一致性变得容易，并在需要时可以快速地更新样式。此外，变量还有助于提高代码的可读性，使其他开发者更容易理解和维护代码。

变量声明与属性声明非常相似，写法为：<variable>: <expression>。与属性不同的是，属性只能在样式规则或at-rule中声明，而变量可以在任何您想要的地方声明。要使用变量，只需将其包含在值中。

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

.alert {
  border: 1px solid $border-dark;
}

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

.alert
  border: 1px solid $border-dark

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

:::

默认值 ​

通常情况下，当你为一个变量分配值时，如果这个变量已经有一个值，那么旧值将被覆盖。但是，如果你正在编写一个Sass库，你可能希望在生成CSS之前允许用户配置库的变量。

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

配置模块 ​

当使用@use规则来加载一个模块时，使用!defualt定义的变量能够被配置。Sass库通常使用!default变量来允许用户配置库的CSS。

要加载带有配置的模块，可以使用@use <url> with (<variable>: <value>, <variable>: <value>)语法。配置的值将覆盖变量的默认值。只有在样式表顶层使用!default标志编写的变量才能进行配置。这意味着你可以在加载模块时为这些变量设置自定义值，从而影响模块输出的CSS。

// _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
);

// _library.sass
$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.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

内置模块 ​

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

@use "sass:math" as math;

// 这个设置将会失败
math.$pi: 0;

@use "sass:math" as math

// 这个设置将会失败
math.$pi: 0

作用域 ​

在样式表的顶层声明的变量是全局的，这意味着在声明之后的整个模块中都可以访问它们。但并非所有变量都是全局的。在代码块（SCSS中的花括号或Sass中的缩进代码）中声明的变量通常是局部的，只能在声明它们的代码块内访问。这意味着局部变量的作用范围受到限制，只能在定义它们的特定范围内使用。

$global-variable: global value;

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

.sidebar {
  global: $global-variable;

  // 这将失败，因为 $local-variable不在当前作用域中:
  // local: $local-variable;
}

$global-variable: global value

.content
  $local-variable: local value
  global: $global-variable
  local: $local-variable


.sidebar
  global: $global-variable

  // 这将失败，因为 $local-variable不在当前作用域中:
  // local: $local-variable;

.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

遮蔽 ​

局部变量可以与全局变量具有相同的名称。如果发生这种情况，实际上有两个具有相同名称的不同变量：一个是局部变量，另一个是全局变量。这有助于确保编写局部变量的作者在不知情的情况下，不会意外地更改全局变量的值。这种设计有助于避免变量值的误操作和冲突。

$variable: global value;

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

.sidebar {
  value: $variable;
}

$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

.content {
  value: local value;
}

.sidebar {
  value: global value;
}

如果您需要在局部作用域（例如在混入中）设置全局变量的值，您可以使用!global标志。标记为!global的变量声明将始终分配给全局作用域。简而言之，当你需要在局部范围内修改全局变量时，可以通过在变量声明后加上!global标志来实现这个目的。

$variable: first global value;

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

.sidebar {
  value: $variable;
}

$variable: first global value

.content
  $variable: second global value !global
  value: $variable


.sidebar
  value: $variable

.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

流程控制作用域 ​

在流程控制规则中声明的变量有特殊的作用域规则：它们不会遮蔽与流程控制规则同级别的变量。相反，它们会直接赋值给那些变量。这使得有条件地给变量赋值，或者作为循环的一部分构建值变得更容易。

$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;
}

$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

.button {
  background-color: #750c30;
  border: 1px solid #f5ebfc;
  border-radius: 3px;
}

高级变量函数 ​

Sass 核心库提供了一些高级函数来处理变量。meta.variable-exists() 函数用于检查当前作用域中是否存在给定名称的变量，而meta.global-variable-exists() 函数则用于检查全局作用域中是否存在给定名称的变量。这些函数可以帮助你判断特定变量在当前作用域或全局作用域中是否已经被声明。

@use "sass:map";

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

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

@use "sass:map"

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

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

.alert {
  background-color: #ffc107;
}