在前端开发中，SASS 是一种常用的 CSS 预处理器，可以帮助我们写出更简洁、便于维护的代码。而其中的变量功能，可以方便地定义一些重复使用的样式属性值。不过，当多个样式表都用到了同名的 SASS 变量时，可能会导致变量值被覆盖或混淆，进而影响样式的表现。本文将介绍这个问题的具体情况，以及解决方案。
作用域问题的表现
假设有两个样式表文件 a.scss 和 b.scss，它们都引用了 base.scss 这个基础文件，而 base.scss 定义了一个名为 $primary-color 的变量：
// base.scss $primary-color: #007bff;
在 a.scss 中，使用了这个变量来定义链接的颜色：
// a.scss
@import './base.scss';
a {
color: $primary-color;
}而在 b.scss 中，则使用了同名的变量来定义按钮的颜色：
// b.scss
@import './base.scss';
button {
background-color: $primary-color;
}若将这两个样式表都导入到 HTML 中，那么它们各自的样式规则是：
-- -------------------- ---- ------- -- ----- -- - - ------ -------- - -- ----- -- ------ - ----------------- -------- -
这样看起来没有什么问题，但如果我们在 b.scss 的开头又重新定义了一次 $primary-color 变量：
// b.scss
$primary-color: #ff0000;
@import './base.scss';
button {
background-color: $primary-color;
}这时，生成的样式表变成了：
-- -------------------- ---- ------- -- ----- -- - - ------ -------- - -- ----- -- ------ - ----------------- -------- -
可以看到，a.scss 中定义的 $primary-color 的属性值被覆盖掉了，造成了样式不一致的问题。
解决方案
既然问题是出在变量名的重复使用上，那么我们自然想到的解决方案就是避免变量名的重复。这样一来，在不同样式表中定义同名的变量就不会相互影响了，这种方法被称为 命名空间 （Namespace）。
注意：
在SCSS中 命名空间 和 mixin几乎一样效果，不过还是会有点区别，在 import 函数引用别的文件的时候。命名空间的变量必须加上 !global 标识符才能跨脚本调用
在 SASS 中，使用命名空间的方法是在变量名前添加前缀，例如：
// base.scss $my-prefix-primary-color: #007bff;
// a.scss
@import './base.scss';
a {
color: $my-prefix-primary-color;
}// b.scss
@import './base.scss';
button {
background-color: $my-prefix-primary-color;
}到这里，问题就得到了解决。即使在 b.scss 中再次定义同名的变量：
// b.scss
$my-prefix-primary-color: #ff0000;
@import './base.scss';
button {
background-color: $my-prefix-primary-color;
}生成的样式规则仍然分别是：
-- -------------------- ---- ------- -- ----- -- - - ------ -------- - -- ----- -- ------ - ----------------- -------- -
可以看到，现在不同样式表中使用的同名变量已经不会相互冲突了，样式表的表现也变得一致了。
总结
SASS 变量是一种常用的前端开发工具，但当一个变量被多个样式表同时引用时，容易产生冲突或造成混淆。因此，我们可以使用命名空间的方式避免这种情况。不同样式表中的同名变量需要添加前缀，以保证其独立性。让变量用起来更轻松便利，推荐使用它以提高前端代码的可维护性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe79d795b1f8cacdd3e59d