npm 包 primer-colors 使用教程

前言

在前端开发中，我们经常需要使用到颜色样式，但是很多时候设计师给出的颜色是 RGB 或者 HEX 格式，我们需要手动转换成 CSS 颜色格式再使用。而使用 npm 包 primer-colors 可以让这个过程变得更加简单、方便

什么是 primer-colors

primer-colors 是一个提供了 Github Primer 风格颜色变量的 npm 包。Github Primer 是 Github 开源项目的设计系统，其特点是注重简洁、易读性高且显得非常亲切。

primer-colors 在 Github Primer 风格的基础上构建，提供了一个方便的方式来使用这种风格的颜色变量。

如何使用 primer-colors

安装

在使用 primer-colors 之前，需要先安装它。

可以通过在终端中运行以下命令来安装它：

npm install primer-colors

使用

安装完毕后，使用起初也非常简单。

首先，在需要使用颜色的文件中引入 primer-colors：

import colors from 'primer-colors';

然后，在需要使用颜色的地方直接使用 colors 变量即可：

.my-class {
  background-color: $blue-5;
  color: $gray-9;
}

变量列表

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

示例代码

<div class="my-class">
  This is my element.
</div>

@import 'primer-colors';

.my-class {
  background-color: $blue-5;
  color: $gray-9;
}

结论

使用 primer-colors 可以大大简化在前端开发中使用颜色的过程，提高开发效率。如果你希望在自己的项目中使用 Github Primer 风格的颜色变量，不妨试试使用 primer-colors。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f713c9ba9b7065299ccbb36