变量

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

¥A variable declaration looks a lot like a property declaration: it’s written <variable>: <expression>. Unlike a property, which can only be declared in a style rule or at-rule, variables can be declared anywhere you want. To use a variable, just include it in a value.

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

默认值默认值 permalink

¥Default Values

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

¥Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS.

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

¥To make this possible, Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.

配置模块配置模块 permalink

¥Configuring Modules

兼容性:

Dart Sass

since 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

¥Variables defined with !default can be configured when loading a module with the @use rule. Sass libraries often use !default variables to allow their users to configure the library’s CSS.

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

¥To load a module with configuration, write @use <url> with (<variable>: <value>, <variable>: <value>). The configured values will override the variables’ default values. Only variables written at the top level of the stylesheet with a !default flag can be configured.

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

内置变量内置变量 permalink

¥Built-in Variables

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

¥Variables that are defined by a built-in module cannot be modified.

@use "sass:math" as math;

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

@use "sass:math" as math

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

范围范围 permalink

¥Scope

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

¥Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

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

$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

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

.sidebar {
  global: global value;
}

影子影子 permalink

¥Shadowing

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

¥Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global. This helps ensure that an author writing a local variable doesn’t accidentally change the value of a global variable they aren’t even aware of.

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

如果你需要在本地范围内（例如在 mixin 中）设置全局变量的值，则可以使用 !global 标志。标记为 !global 的变量声明将始终分配给全局作用域。

¥If you need to set a global variable’s value from within a local scope (such as in a mixin), you can use the !global flag. A variable declaration flagged as !global will always assign to the global scope.

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

Older Sass versions allowed `!global` to be used for a variable that doesn't
exist yet. This behavior was deprecated to make sure each stylesheet
declares the same variables no matter how it's executed.

流程控制范围流程控制范围 permalink

¥Flow Control Scope

流量控制规则 中声明的变量具有特殊的作用域规则：它们不会在与流控制规则相同的级别上隐藏变量。相反，他们只是分配给这些变量。这使得有条件地为变量赋值或将值构建为循环的一部分变得更加容易。

¥Variables declared in flow control rules have special scoping rules: they don’t shadow variables at the same level as the flow control rule. Instead, they just assign to those variables. This makes it much easier to conditionally assign a value to a variable, or build up a value as part of a loop.

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

高级变量函数高级变量函数 permalink

¥Advanced Variable Functions

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

¥The Sass core library provides a couple advanced functions for working with variables. The meta.variable-exists() function returns whether a variable with the given name exists in the current scope, and the meta.global-variable-exists() function does the same but only for the global scope.

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