在前端开发中，CSS 样式的编写是不可避免的。而在一些大规模的项目中，CSS 样式表通常会变得越来越复杂。在样式表中使用变量可以做到在多处修改某个值时只需要修改一处的效果，这对于后期的维护和更改都会大有帮助。本文将介绍如何在 SASS 中定义全局颜色变量的最佳实践。
为什么需要全局颜色变量
在许多网站中，颜色通常是在许多地方都存在的，比如说按钮、链接、标题等等。如果想要在这些地方修改特定颜色时都改一遍显得很麻烦，这时候就需要用到全局颜色变量了，把颜色值定义成一个变量，然后通过使用变量来应用特定颜色。
如果我们把样式定义为类似下面这样的状态：
-- -------------------- ---- ------- ------ - ----------- ----- ------- --- ----- ----- ------ ----- - - - ------ -------- - --- --- -- - ------ ----- ------------ ----- -
很快会发现，在其中多次使用相同的颜色值是很麻烦的。而如果你想把其中的一个值修改为另一个颜色，则需要修改所有使用这个颜色值的地方。 下面我们来看看如何使用全局变量来简化这一流程。
如何定义全局的颜色变量
SASS 提供了一个 $ 符号定义变量。通过将颜色值定义为变量，我们可以在样式表中使用变量来代替颜色值，达到全局颜色变量的效果。
定义变量的方法如下：
$hover-color: #6c757d;
使用变量的方法如下：
a:hover {
color: $hover-color;
}这样做之后，就可以在一个地方定义颜色变量，就可以在其他地方使用它。而如果我们需要修改这个颜色值时，只需更改定义变量的地方。
避免命名冲突
在一个大型项目中，很容易出现重名的变量定义。如果出现这样的情况，编译器将使用最近的那个定义。
我们可以通过名字空间来避免这种情况发生。具体做法是在变量名前加上一个可读性强的前缀，比如下面这种方式：
$theme-color-primary: blue; $theme-color-secondary: red;
这样就可以避免两个不同部分的代码中使用相同的变量名，让代码更加清晰。
颜色变量最佳实践
从实践中来看，推荐的颜色变量命名规范是基于颜色的使用。以下是一个基本的示例：
-- -------------------- ---- ------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- ----------- -------- ----------- -------- ----------- -------- ----------- -------- ----------- --------
该命名规则基于 Bootstrap s Color 列表。
通过使用上面这样的变量命名规则，你可以轻松地扩展你的颜色调色板来满足项目的需求。比如新建的颜色可以取名为 purple。
$purple-100: #faf0fa; $purple-300: #e39ce0; $purple-500: #ab47bc; $purple-700: #93187c; $purple-900: #4b003f;
这种变量的命名规范通常使用颜色名称作为前缀，后面跟着用作基本名称的颜色强度（100 - 900 共 5 个级别），最后是实际的颜色值。
通过使用这种命名规范，一旦觉得需要添加一种新的颜色，只需要在定义旁边加上新的颜色名称和适当的编号就可以了。同时，你只需为新定义颜色的组件编写一组样式，然后发送到生产环境即可，同时可以为将来维护代码工作带来方便。
结论
全局颜色变量是在大型项目中保持一致性和可维护性的强有力工具，同时也可以减少样式表中重复代码的使用。本文介绍了最佳的全局颜色变量命名规范，包括避免使用命名冲突和对命名命名的详细解释，以及如何在实践中实现这些规则。希望这些提示能使你的项目更加可靠，可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709cb0cd91dce0dc87bbf28