前言
在前端开发中，我们经常需要使用到颜色样式，但是很多时候设计师给出的颜色是 RGB 或者 HEX 格式，我们需要手动转换成 CSS 颜色格式再使用。而使用 npm 包 primer-colors 可以让这个过程变得更加简单、方便
什么是 primer-colors
primer-colors 是一个提供了 Github Primer 风格颜色变量的 npm 包。Github Primer 是 Github 开源项目的设计系统，其特点是注重简洁、易读性高且显得非常亲切。
primer-colors 在 Github Primer 风格的基础上构建，提供了一个方便的方式来使用这种风格的颜色变量。
如何使用 primer-colors
安装
在使用 primer-colors 之前，需要先安装它。
可以通过在终端中运行以下命令来安装它：
--- ------- -------------
使用
安装完毕后，使用起初也非常简单。
首先，在需要使用颜色的文件中引入 primer-colors：
------ ------ ---- ----------------
然后，在需要使用颜色的地方直接使用 colors 变量即可：
--------- - ----------------- -------- ------ -------- -
变量列表
primer-colors 提供以下变量：
$black$white$gray-0$gray-1$gray-2$gray-3$gray-4$gray-5$gray-6$gray-7$gray-8$gray-9$blue-0$blue-1$blue-2$blue-3$blue-4$blue-5$blue-6$blue-7$blue-8$blue-9$green-0$green-1$green-2$green-3$green-4$green-5$green-6$green-7$green-8$green-9$yellow-0$yellow-1$yellow-2$yellow-3$yellow-4$yellow-5$yellow-6$yellow-7$yellow-8$yellow-9$orange-0$orange-1$orange-2$orange-3$orange-4$orange-5$orange-6$orange-7$orange-8$orange-9$red-0$red-1$red-2$red-3$red-4$red-5$red-6$red-7$red-8$red-9$purple-0$purple-1$purple-2$purple-3$purple-4$purple-5$purple-6$purple-7$purple-8$purple-9$pink-0$rebeccapurple$rebeccapurple-1$rebeccapurple-2
示例代码
---- ----------------- ---- -- -- -------- ------
------- ---------------- --------- - ----------------- -------- ------ -------- -
结论
使用 primer-colors 可以大大简化在前端开发中使用颜色的过程，提高开发效率。如果你希望在自己的项目中使用 Github Primer 风格的颜色变量，不妨试试使用 primer-colors。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f713c9ba9b7065299ccbb36