SCSS 变量 - CSS 主题

SCSS 变量是一种 CSS 预处理器，可以帮助程序员定义和管理主题颜色、字体、间距等常用样式，使得代码的可维护性更加高效。

定义变量

SCSS 变量可以使用 $ 符号进行定义，例如：

$primary-color: #4285f4;
$body-font-size: 14px;

使用变量

在 CSS 中使用变量可以通过 #{} 进行插值，例如：

.btn-primary {
  background-color: $primary-color;
  font-size: #{$body-font-size};
}

变量作用域

SCSS 的变量存在作用域概念，变量的作用域依赖于变量的定义位置。例如：

$primary-color: #4285f4;

button {
  $primary-color: #e91e63; // 局部变量
  background-color: $primary-color;
}

div {
  background-color: $primary-color; // 全局变量
}

动态更新变量

SCSS 变量可以动态更新，可以通过 !global 标记在任何地方修改全局变量的值。例如：

$primary-color: #4285f4;

div {
  background-color: $primary-color;
}

button {
  $primary-color: #e91e63 !global; // 动态更新全局变量
  background-color: $primary-color;
}

Mixin

Mixin 是 SCSS 中一种强大的代码复用机制，可以把一组 CSS 样式封装成一个函数，并在需要的地方调用。例如：

@mixin text-center {
  text-align: center;
}

h1 {
  @include text-center;
}

继承

SCSS 允许通过继承方式共享规则集之间的样式代码。例如：

.btn {
  padding: 8px 16px;
  border-radius: 4px;
}

.btn-primary {
  @extend .btn; // 继承 .btn 样式
  background-color: $primary-color;
  color: #fff;
}

总结

SCSS 变量和 Mixin/继承等功能，可以帮助程序员更加高效地管理 CSS 样式，提高代码的可维护性。