当我们在开发前端应用时，很多时候需要使用很多颜色值，如果每次都手动自己写这些颜色值，那么工作量和时间都不可控，而 material-scss-colors 这个 npm 包则允许我们快速的使用 Material Design 风格中的各种颜色。
安装
在使用之前，我们需要先安装这个 npm 包。使用 npm 包管理器，我们可以以以下命令来安装。
--- ------- --------------------
安装完成后，我们就可以引入这个包中已经定义好的颜色值来在我们的项目中直接使用了。
使用
在我们的项目中，我们可以直接引入 material-scss-colors 这个包，来在我们的样式文件中使用其中的颜色值。以下是一个简单的使用示例。
-- -- -------------------- - ------- ------------------ -- --------- ---- - ----------------- --------------------- ------ ------------------- -
在这个代码片段中，我们首先引入了 material-scss-colors 包，接着就可以在样式中使用其中定义好的颜色值。在这个例子中，我们使用了 material-scss-colors 包中定义的两个颜色变量 $material-indigo-500 和 $material-grey-100。
深度解析
变量命名规则
如果你仔细观察这个 npm 包，你会发现其中定义的颜色变量的名称都使用了一定的命名规则。其中，每个颜色的名称都由两部分组成，用短横线 - 连接。
例如，我们前面使用的 $material-indigo-500，它的第一部分 material 表示这是一个 Material Design 颜色，第二部分 indigo-500 表示这是一个 indigo 颜色系中的 500 粗细。
颜色系
在 Material Design 中，所有颜色都属于一定的颜色系。这个 npm 包已经定义了以下颜色系。
- Red（红色系）
- Pink（粉色系）
- Purple（紫色系）
- Deep Purple（深紫色系）
- Indigo（靛青色系）
- Blue（蓝色系）
- Light Blue（浅蓝色系）
- Cyan（青色系）
- Teal（水鸭色系）
- Green（绿色系）
- Light Green（浅绿色系）
- Lime（酸橙色系）
- Yellow（黄色系）
- Amber（琥珀色系）
- Orange（橙色系）
- Deep Orange（深橙色系）
- Brown（棕色系）
- Grey（灰色系）
- Blue Grey（蓝灰色系）
在这里，我们可以使用类似 $material-pink-300 这样的变量来引用粉色系中的 300 粗细的颜色。
颜色的粗细
除了颜色系之外，每个颜色还可以有不同的粗细。这个 npm 包已经定义了以下粗细程度。
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
我们可以使用类似 $material-indigo-500 这样的变量来引用 indigo 颜色系中的 500 粗细的颜色。
颜色阴影
还有一点需要注意，某些颜色系在不同的粗细程度下可能会是不同的颜色。在 Material Design 中，这种情况很常见，因为这些颜色系在不同的粗细程度下可能会被用于不同的用途，例如按钮、图标、文本、背景等等。
在这个 npm 包中，还定义了类似 $material-red-a400 这样的颜色变量，其中 a400 表示这个颜色的阴影属性。在 Material Design 中，这些阴影属性定义了颜色在不同用途下对应的具体颜色。
总结
在这篇文章中，我们介绍了 material-scss-colors 这个 npm 包，它可以让我们更加方便地使用 Material Design 风格中的各种颜色。我们讲解了它的安装、使用以及颜色粗细和阴影属性等相关概念。我相信，这个包的使用将有助于我们更快速地开发出高质量的前端应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005664181e8991b448e24ff