什么是 Sass-var
Sass-var 是一个方便管理 CSS 变量的 npm 包。它可以让我们在 Sass 中定义和使用变量，而无需手动在 CSS 中编写变量代码。
Sass-var 的优势
- 提高 CSS 可读性和可维护性；
- 增加代码复用性；
- 便于管理和修改变量。
使用 Sass-var
1. 安装 sass-var
npm install sass-var --save-dev
2. 引入 sass-var
在 Sass 的入口文件中引入 sass-var：
@import 'sass-var';
3. 设置变量
在 Sass 中使用 $ 符号定义变量，例如：
$primary-color: #2c3e50;
4. 使用 sass-var
在 Sass 文件中的任何地方可以使用变量 sass-var，例如：
body {
background-color: var(primary-color);
}5. 输出 CSS
使用 Sass 编译工具将 Sass 文件编译为 CSS 文件。例如使用 gulp 来编译 Sass 文件：
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});6. 查看编译结果
编译后的 CSS 中，primary-color 将被替换为 #2c3e50。
body {
background-color: #2c3e50;
}Sass-var 的高级用法
定义变量并引用
我们可以在 Sass 文件中定义一个变量，并将其引用为其他 Sass 变量的值。
$size: 20px; $line-height: $size * 1.5;
变量作用域
Sass 变量有全局和局部之分。全局变量可以在所有 Sass 文件中使用，而局部变量只能在定义它的 Sass 文件中使用。
全局变量的定义使用 !global 标志：
$primary-color: #2c3e50 !global;
局部变量默认是局部的，如需设置为全局变量，在变量名后使用 !global 标志：
$primary-color: #2c3e50 !global;
操作变量
变量可以进行大多数算术、逻辑和字符串操作。
$width: 100px;
$height: $width / 2;
#box {
width: $width;
height: $height;
}SASS 中的 map
map 是一种存储键值对的数据类型，可以用于存储配置项、主题、选项等。
例如：
$colors: (
red: #ff0000,
blue: #0000ff,
green: #00ff00
);引用 map 的值：
h1 {
color: map-get($colors, red);
}迭代
在 Sass 中可以使用 @each，@for 和 @while 操作符进行迭代，配合 map 使用可以更方便地生成代码。
例如，我们可以使用 @each 遍历 map 中的键值对：
$animals: (panda, tiger, lion, koala);
@each $animal in $animals{
.#{$animal} {
background: url('/images/#{$animal}.png');
}
}这将生成以下 CSS 代码：
-- -------------------- ---- -------
------ -
----------- -------------------------
-
------ -
----------- -------------------------
-
----- -
----------- ------------------------
-
------ -
----------- -------------------------
-总结
Sass-var 是一个非常实用的 npm 包，可以极大地提高 CSS 的可读性、可维护性和代码复用性。掌握 Sass-var 的用法，可以让我们更便捷地管理 CSS 变量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600575c781e8991b448ea77a