变数

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

变量声明看起来很像属性声明：它是书面的<variable>: <expression>。与只能在样式规则或规则中声明的属性不同，可以在所需的任何位置声明变量。要使用变量，只需将其包含在值中即可。

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

Head️抬头！

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

  • Sass变量全部由Sass编译。CSS变量包含在CSS  输出中。

  • CSS变量对于不同的元素可以具有不同的值，但是Sass变量一次只能具有一个值。

  • 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（Dart Sass）
从  1.23.0开始
LibSass
✗
rubySass
✗

目前仅Dart Sass支持@use。其他实现的用户必须改用@import规则  。

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

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

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  语法

@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

范围永久链接范围

在样式表的顶层声明的变量是global。这意味着在声明它们之后，可以在模块的任何位置对其进行访问。但这并非对所有变量都适用。在块中声明的代码（SCSS中的花括号或Sass中的缩进代码）通常是local，并且只能在声明它们的块中访问。

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  语法

$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标志。标记为as的变量声明!global将始终分配给全局范围。

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

Head️抬头！

兼容性：
Dart·Sass（Dart Sass）
从  2.0.0开始
LibSass
✗
rubySass
✗

较旧的Sass版本允许!global用于尚不存在的变量。不建议使用此行为，以确保每个样式表无论执行方式如何都声明相同的变量。

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

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

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

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: #750c30;
  border: 1px solid #f5ebfc;
  border-radius: 3px;
}

Head️抬头！

流控制作用域中的变量可以分配给外部作用域中的现有变量，但不能在那里声明新变量。即使将变量声明为，也请确保在分配变量之前已经声明了该变量  null。

高级变量功能永久链接高级变量功能

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

Head️抬头！

用户有时会希望使用插值来基于另一个变量来定义变量名称。Sass不允许这样做，因为一眼就很难知道在哪里定义了哪些变量。但是，您可以做的是定义一个从名称到值的映射，然后可以使用变量进行访问。

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