在前端开发中，我们经常需要使用到颜色。而在项目中，我们经常需要定义一套全局的颜色方案，以便于在不同的页面中使用。SASS 是一款功能强大的 CSS 预处理器，它提供了很多方便的方法来定义全局颜色方案。
基本思路
在 SASS 中定义全局颜色方案的基本思路是使用变量来存储颜色值，然后在需要使用颜色的地方调用这些变量。这样一来，如果我们需要修改某一个颜色，我们只需要修改对应的变量即可，而不需要在每一个使用到这个颜色的地方都进行修改。
定义颜色变量
在 SASS 中，我们可以使用 $ 符号来定义变量。比如，我们可以定义一个名为 $primary-color 的变量来存储主要颜色：
--------------- --------
这样一来，我们就可以在项目中使用 $primary-color 变量来调用这个颜色了。
定义颜色方案
SASS 还提供了一种方便的方法来定义一整套颜色方案。我们可以使用 @mixin 来定义一个颜色方案，然后在需要使用的地方调用这个 @mixin。
------ ------------ - --------------- -------- ----------------- -------- --------------- -------- ------------ -------- --------------- -------- -------------- -------- ------------- -------- ------------ -------- -
这里我们定义了一个名为 color-scheme 的 @mixin，其中包含了一整套颜色方案。可以看到，我们使用了 $ 符号来定义多个颜色变量。在需要使用这个颜色方案的地方，我们只需要调用这个 @mixin 即可。
---- - -------- ------------- ----------------- ------------- ------ ------------ -
这里我们在 body 元素中调用了 color-scheme，然后使用 $light-color 和 $dark-color 变量来定义背景色和文字颜色。
深度嵌套
SASS 还支持深度嵌套，这让我们可以更方便地组织代码。比如，我们可以使用深度嵌套来定义不同的颜色方案：
------ ---------------------------- ----------------- -
-------- -
------ ---------------
-
---------- -
------ -----------------
-
-这里我们定义了一个 @mixin，其中包含了两个参数：$primary-color 和 $secondary-color。然后我们使用深度嵌套来定义两个不同的选择器，分别对应这两个颜色。在需要使用这个 @mixin 的地方，我们可以传入不同的参数值来定义不同的颜色方案。
-------- --------------------- ---------
这里我们调用了 color-scheme，并传入了两个参数值：#007bff 和 #6c757d。这样一来，我们就定义了一个包含两个颜色的颜色方案。
总结
在 SASS 中定义全局颜色方案的方法非常简单，我们只需要使用变量来存储颜色值，然后在需要使用颜色的地方调用这些变量即可。同时，SASS 还提供了 @mixin 和深度嵌套等功能，帮助我们更方便地定义和组织颜色方案。
示例代码
-- ------
--------------- --------
----------------- --------
-- ------
------ ------------ -
--------------- --------
------------ --------
--------------- --------
-------------- --------
------------- --------
------------ --------
-
-- ------
---- -
-------- -------------
----------------- -------------
------ ------------
-
-- -----------
------ ---------------------------- ----------------- -
-------- -
------ ---------------
-
---------- -
------ -----------------
-
-
-- -----------
-------- --------------------- ---------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65558271d2f5e1655dfb7e28