变量

Sass 变量很简单：你将一个值赋给一个以 $ 开头的名称，然后你可以引用该名称而不是值本身。但是，尽管它们很简单，但它们是 Sass 带来的最有用的工具之一。变量使减少重复、进行复杂计算、配置库以及更多成为可能。

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

  SCSS

  Sass

  CSS

       游乐场SCSS 语法$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

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

       游乐场Sass 语法$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

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

⚠️ 注意！

CSS 有自己的变量，它们与 Sass 变量完全不同。了解差异！

Sass 变量在 Sass 编译时全部被编译掉。CSS 变量包含在 CSS 输出中。
CSS 变量可以对不同的元素有不同的值，但 Sass 变量一次只有一个值。
Sass 变量是 *命令式* 的，这意味着如果你使用一个变量然后改变它的值，之前的使用将保持不变。CSS 变量是 *声明式* 的，这意味着如果你改变了值，它将影响之前的使用和后面的使用。

SCSS

Sass

CSS

     游乐场SCSS 语法$variable: value 1;
.rule-1 {
  value: $variable;
}

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

     游乐场Sass 语法$variable: value 1
.rule-1
  value: $variable


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

CSS 输出.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

💡 有趣的事实

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

默认值默认值永久链接

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

为了使这成为可能，Sass 提供了 !default 标志。这将一个值赋给一个变量，*只有* 当该变量未定义或其值为 null 时。否则，将使用现有值。

配置模块配置模块永久链接

Dart Sass: 自 1.23.0 起
LibSass: ✗
Ruby Sass: ✗

目前只有 Dart Sass 支持 @use。其他实现的用户必须使用 @import 规则代替。

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

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

  SCSS

  Sass

  CSS
SCSS 语法// _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
);
Sass 语法// _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)



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

内置变量内置变量永久链接

由内置模块定义的变量不能修改。

  SCSS

  Sass

       游乐场SCSS 语法@use "sass:math" as math;

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

       游乐场Sass 语法@use "sass:math" as math

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

范围范围永久链接

在样式表顶层声明的变量是 *全局* 的。这意味着它们可以在模块中声明后被访问到。但这对所有变量都不适用。在块（SCSS 中的括号或 Sass 中的缩进代码）中声明的变量通常是 *局部* 的，只能在其被声明的块内访问。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法$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;
}

       游乐场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

CSS 输出.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

阴影阴影永久链接

局部变量甚至可以与全局变量同名声明。如果发生这种情况，实际上有两个同名的不同变量：一个是局部变量，一个是全局变量。这有助于确保编写局部变量的作者不会意外地改变他们甚至没有意识到的全局变量的值。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法$variable: global value;

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

.sidebar {
  value: $variable;
}

       游乐场Sass 语法$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

CSS 输出.content {
  value: local value;
}

.sidebar {
  value: global value;
}

如果你需要在局部范围内设置全局变量的值（比如在 mixin 中），可以使用 !global 标志。标记为 !global 的变量声明将 *始终* 赋给全局范围。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法$variable: first global value;

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

.sidebar {
  value: $variable;
}

       游乐场Sass 语法$variable: first global value

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


.sidebar
  value: $variable

CSS 输出.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

⚠️ 注意！

Dart Sass: 自 2.0.0 起
LibSass: ✗
Ruby Sass: ✗

旧版本的 Sass 允许对尚未存在的变量使用 !global。这种行为已被弃用，以确保每个样式表都声明相同的变量，无论其执行方式如何。

!global 标志只能用于设置已经在文件顶层声明的变量。它 *不能* 用于声明新的变量。

流程控制范围流程控制范围永久链接

在流程控制规则中声明的变量具有特殊的范围规则：它们不会与流程控制规则相同级别的变量重叠。相反，它们只是赋值给这些变量。这使得对变量进行条件赋值或作为循环的一部分构建一个值变得容易得多。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法$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;
}

       游乐场Sass 语法$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

CSS 输出.button {
  background-color: rgb(116.96, 12.04, 48.16);
  border: 1px solid rgb(245.4696132597, 235.4309392265, 251.5690607735);
  border-radius: 3px;
}

⚠️ 注意！

流程控制范围内的变量可以赋值给外部范围中已存在的变量，但流程控制范围内声明的新变量在外部范围内将不可访问。确保变量在赋值之前已声明，即使你需要将其声明为 null。

高级变量函数高级变量函数永久链接

Sass 核心库提供了一些用于处理变量的高级函数。 meta.variable-exists() 函数返回当前范围内是否存在具有给定名称的变量，而 meta.global-variable-exists() 函数则执行相同的操作，但仅针对全局范围。

⚠️ 注意！

用户偶尔希望使用插值来基于另一个变量定义变量名称。Sass 不允许这样做，因为它使难以一眼看出哪些变量在何处定义。但是，你 *可以* 做的是定义一个从名称到值的映射，然后你可以使用变量来访问它。

SCSS

Sass

CSS

     游乐场SCSS 语法@use "sass:map";

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

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

     游乐场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")





CSS 输出.alert {
  background-color: #ffc107;
}