介绍
colors.stylus 是一个基于 Stylus 预处理器的 npm 包，它在 CSS 中提供了一些方便的颜色相关的函数和变量，使得前端开发者可以更加轻松地管理颜色。本文将对 colors.stylus 的使用进行详细介绍，并提供示例代码。
安装
你可以使用 npm 来安装 colors.stylus：
npm install colors.stylus
使用
为了使用 colors.stylus 的函数和变量，你需要先在样式表中引入它：
@import 'colors.stylus'
然后就可以开始使用其中的函数和变量了。
变量
colors.stylus 定义了一些常见颜色的变量，例如：
body
background-color white
color black
a
color primary
&:hover
color darken(primary, 20%)上面的代码中，white 是一个颜色变量，代表白色。同样的，primary 也是一个颜色变量，代表一个主色调。
除了常见的颜色之外，colors.stylus 还定义了一些其它有意思的颜色变量：
random随机颜色transparent透明inherit继承unset重置
函数
colors.stylus 定义了一些便捷的函数来帮助你操作和管理颜色。
mix()
mix() 函数可以通过混合两个颜色来创建一个新的颜色：
background-color: mix(#f00, #00f) // => #800080
这个例子创建了一个介于红色和蓝色之间的紫色。同样的，你也可以指定一个 weight 来控制两种颜色的混合平衡度：
background-color: mix(#f00, #00f, 50%) // => #7f007f
在这个例子中，我们将两种颜色平均地混合，因此得到了一个中间颜色。
darken()
darken() 函数可以将一个颜色暗化：
background-color: darken(#69c, 20%) // => #42728b
这个例子将 #69c 的颜色暗化了 20%，得到的新颜色是 #42728b。
lighten()
lighten() 函数则可以将一个颜色变亮：
background-color: lighten(#69c, 20%) // => #9ac6ff
这个例子将 #69c 的颜色变亮了 20%，得到的新颜色是 #9ac6ff。
desaturate()
desaturate() 函数可以将一个颜色变成灰色：
background-color: desaturate(#69c, 100%) // => #808080
这个例子将 #69c 的颜色变成了灰色。你也可以指定一个 percentage 来控制降低的饱和度：
background-color: desaturate(#69c, 50%) // => #8db3e2
这个例子将 #69c 的颜色的饱和度降低了 50%。
saturate()
saturate() 则可以将一个颜色饱和度变高，和 desaturate() 函数的作用刚好相反：
background-color: saturate(#69c, 100%) // => #69c
这个例子将 #69c 的颜色饱和度变得非常高。你也可以指定一个 percentage 来控制饱和度的提高：
background-color: saturate(#69c, 50%) // => #97e2ff
这个例子使得 #69c 的颜色饱和度提高了 50%。
complement()
complement() 函数可以获取一个颜色的互补色：
background-color: complement(#69c) // => #c96969
这个例子获取了 #69c 的互补色，得到的新颜色是 #c96969。
tint()
tint() 函数可以将一个颜色变成一个过渡颜色，与 lighten() 函数有些类似：
background-color: tint(#69c, 20%) // => #b1d9ff
这个例子将 #69c 的颜色变成了一个稍微发光的颜色。你也可以指定一个 percentage 来控制过渡的程度：
background-color: tint(#69c, 50%) // => #b3e6ff
这个例子使得 #69c 的颜色过渡了一半。
shade()
shade() 函数则是将一个颜色变成暗的过渡颜色，与 darken() 函数相似：
background-color: shade(#69c, 20%) // => #4d8ca3
这个例子将 #69c 的颜色变成了一个稍微暗淡的颜色。你也可以指定一个 percentage 来控制过渡的程度：
background-color: shade(#69c, 50%) // => #9bbce2
这个例子使得 #69c 的颜色变暗了一半。
示例代码
最后，我们来看一个使用所有 colors.stylus 的函数和变量的例子：
-- -------------------- ---- -------
-- -- -------------
------- ---------------
-- ----
-------- - ----
-- ----
----
---------------- -----
----- -----
----------- ------ ----------
-
----- --------
-------
----- ---------------- ----
--
----- -------
-- ----
------
----------------- ------------- ------
-------
----------------- --------------- ----上面的代码定义了一些变量和样式，并使用了 colors.stylus 的 mix()、darken()、shade() 函数等进行了颜色处理。你可以复制这个代码并尝试运行它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de167