如何定义一个Sass变量？

在Sass（Syntactically Awesome Stylesheets）中，变量用于存储可以在整个样式表中重复使用的值。Sass有两种主要的语法格式：SCSS（Sassy CSS）和Sass（缩进语法）。在这两种格式中，定义变量的方式有所不同。

使用SCSS语法定义变量

SCSS语法类似于CSS，并且使用花括号和分号。在SCSS中，变量以美元符号$开头，后面跟着变量名，然后是冒号和值。

// 定义变量
$primary-color: #333;
$font-stack: Helvetica, sans-serif;
$base-spacing: 10px;

// 使用变量
body {
  color: $primary-color;
  font-family: $font-stack;
  margin: $base-spacing;
}

使用Sass（缩进语法）定义变量

Sass语法使用缩进来表示嵌套，而不是花括号和分号。在这种语法中，变量同样以美元符号$开头，后面跟着变量名和值，但值后面不需要分号。

// 定义变量
$primary-color: #333
$font-stack: Helvetica, sans-serif
$base-spacing: 10px

// 使用变量
body
  color: $primary-color
  font-family: $font-stack
  margin: $base-spacing

注意事项

1. 变量命名：变量名可以是任何有效的CSS选择器名称，但通常建议使用描述性的名称，以便更容易理解其用途。
2. 作用域：Sass变量具有局部作用域，这意味着它们只能在其定义的上下文中以及该上下文的所有子上下文中使用。如果你想在多个文件中共享变量，可以使用Sass的@import或@use规则来导入一个包含变量的文件。
3. 默认值：在Sass中，你可以为变量设置默认值，然后在需要的时候覆盖它们。这在创建可重用的组件和库时特别有用。

// 定义变量并设置默认值
$primary-color: #333 !default;

// 覆盖默认值
$primary-color: #ff0000;

body {
  color: $primary-color; // 这里会使用#ff0000
}

通过以上方式，你可以在Sass中定义和使用变量，从而使你的样式表更加简洁和易于维护。