声明

以 $ 开头

$primary-color: red;

使用

$primary-color: red;

.test {
  color: $primary-color;
}

Sass 对于 _ - 的处理

如下 $primary-color 与 $primary_color, Sass 视为同一变量名，这是因为 Sass 变量将连字符 - 和下划线 _ 视为相同的字符

$primary-color: red;
$primary_color: red;

局部变量

在 css 文件顶层声明的变量是全局变量，声明后可以在模块中的任何地方被访问。
在块 {} 中声明的变量是局部变量，只能在声明它们的块内访问。

.test {
  $primary-color-one: yellow;
  color: $primary-color-one;
}

局部变量提升为全局变量

加入 !global

注意使用 !global 提升全局变量时，其中的全局变量只能在其后面的 css 中使用，不能在其上层使用。

如下方的 .test-three 这样使用会产生报错

//.test-three {
//  color: $primary-color-one;
//}

.test {
  $primary-color-one: yellow !global;
  color: $primary-color-one;
}

.test-two {
  color: $primary-color-one;
}

局部变量覆盖全局变量

$primary-color: red;

.test {
  color: $primary-color;
}

.test-two {
  $primary-color: pink !global;
  color: $primary-color;
}

.test-three {
  color: $primary-color;
}

编译后

.test {
  color: red;
}

.test-two {
  color: pink;
}

.test-three {
  color: pink;
}

可以看出使用 !global 后，全局变量被改变了

局部变量和全局变量重名

当局部变量和全局变量重名时，不会覆盖全局变量，而是同时存在，在哪个作用域访问的就是哪个变量。

最终 background 采用的是 blue

$primary-color: red;

.test-one {
  $primary-color: blue;
  background: $primary-color;
}

@import 的全局变量覆盖

如下我们在 sub.scss 定义一个和 index.scss 一样的变量

$primary-color: blue;

第一种情况

sub.scss 中的 $primary-color 被覆盖，这是按照引入顺序正常覆盖的

@import 'sub';

$primary-color: red;

.test {
  color: $primary-color;
}

编译后

.test {
  color: red;
}

第二种情况

sub.scss 中的 $primary-color 覆盖 index.scss，这也是按照引入顺序正常覆盖的

$primary-color: red;
@import 'sub';

.test {
  color: $primary-color;
}

编译后

.test {
  color: blue;
}

第三种情况

我就是想先引入 sub.scss，又想覆盖 index.scss 中的变量，这时可以给 index.scss 中的变量加上 !default

@import 'sub';
$primary-color: red !default;

.test {
  color: $primary-color;
}

编译后

.test {
  color: blue;
}