在前端开发中，我们通常需要定义不同的颜色变量来方便修改和维护。而使用锁定定的颜色名称能够大大减少人工维护的工作量。 npm 包 name-the-color-stylus 就是能够将任意颜色转化为标准 CSS 颜色名称的库。在这篇文章中，我们将详细介绍如何在前端项目中使用 name-the-color-stylus 这个 npm 包。
安装
使用 npm 对于大多数项目来说是标准的方式，可以使用以下命令安装该包：
npm install name-the-color-stylus
当然，还可以将其作为devDependencies 安装：
npm install --save-dev name-the-color-stylus
使用
安装完成之后，我们就可以在 .styl 文件中愉快地使用它了。下面的例子演示了如何使用 name-the-color-stylus 来定义一些基本颜色变量，并为它们分配标准 CSS 颜色名称。
-- -------------------- ---- ------- ------- ----------------------- -------------- - ------- ---------------- - ------- -------------- - ------- ------------- - ------- ----------- - ------- ------------ - ------- ----------- - ------- --------- ------------------- ----------- --------------------- --------- ------------------- -------- ------------------ ------ ---------------- ------- ----------------- ------ ----------------
以上代码会将 $primary-color 转换为名称为 DodgerBlue 的变量 $primary。同样，以下的颜色变量也会被转换为对应的 CSS 颜色名称：
$secondary: SlateGray $success: LimeGreen $danger: Crimson $info: SteelBlue $light: GhostWhite $dark: DimGray
使用纯 CSS
如果我们只是想使用名称，只需在包含变量的 CSS 文件中引入 npm 包 name-the-color-css，如下所示：
<link rel="stylesheet" href="https://unpkg.com/name-the-color-css/index.css">
这样，我们就可以在我们的 css 文件中使用颜色名称了：
-- -------------------- ---- ------- ------------ - ------ ----------- ----------------- ----------- ------------- ----------- - -------------- - ------ ---------- ----------------- ----------- ------------- ---------- -
结语
name-the-color-stylus 是一个非常好用的 npm 包，可以节省编写 CSS 样式表的时间，也可以使代码更加简洁易读。本文仅仅涉及该 npm 包的一些基本用法，如果你想要了解更多的信息，建议查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dd9f6