自学教程Sass 变量很简单：为以 $ 开头的名称赋值，然后可以引用该名称而不是值本身。但是，尽管它们很简单，但它们是 Sass 带来的最有用的工具之一。变量可以减少重复、进行复杂的数学运算、配置库等等。
变量声明
变量声明看起来很像属性声明：它写成：<variable>:<expression>。与只能在样式规则或规则中声明的属性不同，变量可以在您想要的任何位置声明。要使用变量，只需将其包含在值中即可。
$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 变量完全不同，有以下区别：
对于不同的元素，CSS 变量可以有不同的值，但 Sass 变量一次只有一个值。
Sass 变量是命令式的，这意味着如果您使用变量然后更改其值，则先前的使用将保持不变。CSS 变量是声明性的，这意味着如果您更改该值，它将影响早期使用和后续使用。
SCSS
$variable: value 1;
.rule-1 {
value: $variable;
}
$variable: value 2;
.rule-2 {
value: $variable;
}编译为 CSS 结果：
CSS
.rule-1 {
value: value 1;
}
.rule-2 {
value: value 2;
}
注意，Sass 变量将连字符和下划线视为相同。这意味着 $font-size 和 $font_size 都引用同一个变量。
变量 !default
通常，当您为变量赋值时，如果该变量已经具有值，则其旧值将被覆盖。但是，如果您正在编写 Sass 库，您可能希望允许用户在使用库生成 CSS 之前配置库的变量。
为了实现这一点，Sass 提供了 ！default 标志。仅当变量未定义或其值为 null 时，才会为变量赋值。否则，将使用现有值。
使用 ！default 定义的变量可以在使用 @use 规则加载模块时进行配置。Sass 库通常使用 ！default 变量来允许用户配置库的 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;
}SCSS
// style.scss
@use 'library' with (
$black: #222,
$border-radius: 0.1rem
);编译为 CSS 结果：
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 作用域
Sass 变量的作用域只能在当前的层级上有效果，那些在块中声明的（SCSS 中的大括号或 Sass 中的缩进代码）通常是本地的，只能在声明它们的块内访问：
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;
}编译为 CSS 结果：
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;
}编译为 CSS 结果：
CSS
.content {
value: local value;
}
.sidebar {
value: global value;
}
如果需要从局部范围（例如在 mixin 中）设置全局变量的值，则可以使用 ！global 标志。标记为 ！global 的变量声明将始终分配给全局范围。
SCSS
$variable: first global value;
.content {
$variable: second global value !global;
value: $variable;
}
.sidebar {
value: $variable;
}编译为 CSS 结果：
CSS
.content {
value: second global value;
}
.sidebar {
value: second global value;
}
流程控制范围
在流控制规则中声明的变量具有特殊的范围规则：它们不会在与流控制规则相同的级别上隐藏变量。相反，它们只是分配给这些变量。这使得有条件地为变量赋值或构建值作为循环的一部分变得更加容易。
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;
}编译为 CSS 结果：
CSS
.button {
background-color: #750c30;
border: 1px solid #f5ebfc;
border-radius: 3px;
}
高级变量函数
Sass 核心库提供了几个用于处理变量的高级函数。meta.variable-exists（） 函数返回当前作用域中是否存在具有给定名称的变量，meta.global-variable-exists（） 函数执行相同的操作，但仅适用于全局作用域。
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");
}编译为 CSS 结果：
CSS
.alert {
background-color: #ffc107;
}
分享笔记