sass是怎么定义变量的？

在Sass中，定义变量使用$符号，后跟变量名，然后使用冒号:赋值。变量名可以包含字母、数字、下划线和连字符。

例如：

$primary-color: #007bff;
$font-size: 16px;
$border-width: 1px;

这些变量可以在Sass文件中重复使用，例如：

body {
  color: $primary-color;
  font-size: $font-size;
  border: $border-width solid black;
}

Sass还支持几种不同的变量类型，包括：

• 数字: 例如 10, 10px, 10em
• 字符串: 例如 "hello", 'world'
• 颜色: 例如 #007bff, red, rgba(0, 0, 0, 0.5)
• 布尔值: true 或 false
• 列表: 例如 10px 20px 30px, Helvetica, Arial, sans-serif
• Maps (映射): 例如 (key1: value1, key2: value2)
• Null: null

变量作用域:

Sass 变量有作用域的概念。默认情况下，变量是全局的，这意味着它们可以在整个样式表中访问。但是，如果您在代码块（例如 @mixin 或 @function）内声明一个变量，则该变量将具有局部作用域，只能在该代码块内访问。

!default 标记:

您可以使用 !default 标记来定义“默认”变量。如果在其他地方已经定义了同名变量，则 !default 变量将被忽略。这对于创建可配置的主题或库非常有用。

$primary-color: #007bff !default;

!global 标记:

如果要在局部作用域（例如 @mixin 或 @function）内定义全局变量，可以使用 !global 标记。

@mixin my-mixin {
  $my-variable: 10px !global;
}

总而言之，使用 $ 符号加上变量名和冒号赋值，是 Sass 定义变量的核心语法。理解变量类型、作用域和标记，可以更好地利用 Sass 的变量功能，编写更简洁、可维护的样式表。