Rework 是一款丰富的 CSS 预处理器，其中包含该插件 rework-plugin-colors。该插件为 Rework 提供了额外的功能，用于在 CSS 中管理颜色的替换和协调。本文旨在介绍如何安装和使用 rework-plugin-colors。
安装
rework-plugin-colors 是一个 npm 包，您可以通过以下命令进行安装：
npm install rework-plugin-colors --save-dev
用法
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - --------------------------------
----- --- - -
---- -
----------------- --------
------ -------------------- ------
-
--
----- ------- - -
----- ---------
--
----- ------------ - -----------
---------------------
------------在上面的例子中，使用了 rework 和 rework-plugin-colors 的动态对象。使用 rework() 函数加载 CSS，并使用 rework-plugin-colors 转换CSS。最后，调用 rework.toString() 以将其转换为纯文本。
参数
您可以使用以下选项告诉 rework-plugin-colors 替换和映射您的颜色。
options.colors
指定一组颜色名称与十六进制颜色值的映射。例如：
{
'brand-blue': '#0073bb',
'brand-green': '#7ab800',
'brand-yellow': '#fff100'
}此选项将在 CSS 中使用此语法进行调用：
.my-brand {
color: color(@brand-blue alpha(90%));
}options.colorFuncs
指定要替换的颜色函数的名称和功能。例如:
{
'brighten': 'lighten',
'bright': 'lighten',
'darken': 'desaturate',
'opacity': 'alpha'
}此选项将把调用这些函数的原始语法映射到可在CSS中使用的新语法。
例如，使用desaturate()作为你的'darken'算法将允许你这样写你的CSS
.my-banner {
background-color: color(@blues darken(10%));
}options.alphaName
指定要用于设置 alpha 通道的变量名称。 默认情况下为 {@alpha}。
{
alphaName: '@opacity'
}此选项允许该 rework-plugin-colors 替换您自己的变量.
示例代码
下面是使用 rework-plugin-colors 的示例代码。
/* input.css */
.example {
background-color: color(@gray darken(10%));
border: 2px solid color(@blue lighten(20%) alpha(80%));
color: color(@red alpha(50%));
}
-- -------------------- ---- -------
-- -------- --
----- ------ - ------------------
----- ------ - --------------------------------
----- --- - -
-------- -
----------------- ----------- -------------
------- --- ----- ----------- ------------ ------------
------ ---------- ------------
-
--
----- ------- - -
----- ----------
----- ----------
---- ---------
--
----- ------------ - -----------
---------------------
------------
--------------------------上面的示例代码将 input.css 使用 rework-plugin-colors 进行更改，然后将结果输出到控制台：
/* output.css */
.example {
background-color: #a6a6a6;
border: 2px solid rgba(0, 115, 187, 0.8);
color: rgba(255, 0, 0, 0.5);
}由上面的例子可得，假设您的项目希望使用灰、深蓝和红颜色，您可以根据需要定义映射选项；通过定义这些选项，CSS 可以动态地生成所需的颜色组。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64018