在Scss中使用变量

要在 SCSS 中创建变量，可以使用 $ 符号来创建。
变量可以在单个文件内使用，也可以多个文件共用，以下将分别介绍

在单个scss文件内创建变量

以下是一个简单的例子：

// 定义变量
$primary-color: #3498db;
$font-size: 16px;

// 使用变量
body {
  color: $primary-color;
  font-size: $font-size;
}

.header {
  background-color: $primary-color;
}

在上述例子中，我们定义了两个变量 $primary-color 和 $font-size，然后在样式规则中使用这些变量。这样可以提高代码的可维护性和可读性，因为你只需要在变量的声明处修改值，就能够在整个样式表中生效。

请注意，SCSS 中的变量是动态的，可以随时更改其值。这使得在整个样式表中共享和重用值成为可能。

以上是在单个文件内创建变量，scss还支持在多个文件中使用同一个变量

多文件共享scss变量

可以使用 _variables.scss 这样的文件来存放共享的变量，然后在其他文件中使用@import引入这个文件。以下是一个简单的示例：

1. _variables.scss 文件：

// _variables.scss

$primary-color: #3498db;
$font-size: 16px;

2. styles.scss 文件：

// styles.scss

@import '_variables.scss';

body {
  color: $primary-color;
  font-size: $font-size;
}

3. otherStyles.scss 文件：

// otherStyles.scss

@import '_variables.scss';

.header {
  background-color: $primary-color;
}

在这个示例中，_variables.scss 文件包含了共享的变量，然后在 styles.scss 和 otherStyles.scss 中分别使用 @import '_variables'; 导入这些变量。这样，你就可以在这两个文件中使用相同的变量。

确保在项目中使用正确的相对路径来导入 _variables.scss 文件，以便 SCSS 编译器能够找到它。这种方式使得你能够在整个项目中维护一组共享的变量，使得样式表更加一致和可维护。