在前端开发中，使用好的 UI 风格和配色方案可以极大地提升网站或应用的视觉体验。而 material design 是一种流行的、现代感十足的设计语言，它带来了很多优秀的设计元素和配色方案。
在这篇文章中，我们将介绍如何使用 npm 包 material-colors-scss 来获取并使用 material design 的配色方案。同时，我们将会分享一些实践经验和注意事项，帮助大家更好地应用这个 npm 包。
material-colors-scss 简介
material-colors-scss 是一个基于 Google Material Design 的颜色预设库。它提供了主题色板、辅助色、背景色等多种配色方案，可以通过 SCSS 代码轻松引用。这个库适用于 Sass 或 SCSS 项目，并且提供了两种引用方式：变量方式和混合方式。
material-colors-scss 的使用非常简单，只需要在 SCSS 文件中引入该库，并使用相应的变量或混合即可。下面是一个例子：
// 引入 material-colors-scss 的主题色板
@import 'node_modules/material-colors-scss/color-map';
// 使用 main-shade 和 accent-shade 混合生成渐变色
body {
background-color: main-shade(100);
background-image: linear-gradient(to bottom, main-shade(100), accent-shade(700));
}这段代码使用了 main-shade 和 accent-shade 两个混合，以生成主题色板中 100 和 700 两个颜色的渐变色。下面我们将详细介绍如何使用 material-colors-scss。
安装 material-colors-scss
首先，我们需要安装 material-colors-scss。这可以通过 npm 安装，具体命令如下：
npm install material-colors-scss
如果你使用的是 Yarn，也可以使用以下命令安装：
yarn add material-colors-scss
安装完成之后，你就可以在 Sass 或 SCSS 文件中引入该库了。
使用 material-colors-scss
material-colors-scss 提供了两种引用方式：变量方式和混合方式。下面我们将分别介绍这两种方式。
变量方式
在变量方式中，我们可以直接引用 material-colors-scss 中的变量。这些变量包括主题色板和其他配色方案，例如辅助色、警告色、背景色等。
// 引入 material-colors-scss 的主题色板变量
@import 'node_modules/material-colors-scss/color-variables';
// 使用变量
body {
background-color: $mc-light-blue;
color: $mc-grey-800;
}上面的代码中，我们通过 @import 引入了 material-colors-scss 的主题色板变量，并使用了 $mc-light-blue 和 $mc-grey-800 两个变量。
在这种方式中，我们可以直接使用 material-colors-scss 中提供的变量，非常方便。但是，这种方式存在一些问题。如果某个变量的名字与你项目中已有的变量重复，就会导致命名冲突。而且，如果你想自定义某个颜色，也需要在变量中重新定义一遍，代码冗余。
因此，我们可以使用混合方式来解决这个问题。
混合方式
在混合方式中，我们通过使用 material-colors-scss 中的混合来生成对应颜色的 CSS 代码。例如，要生成一个 #0077c2 颜色的样式，我们可以使用 mc-color 混合：
-- -------------------- ---- ------- -- -- -------------------- - -------- - --------- -- ------- --------------------------------------------- ------- ---------------------------------------------- -- ------- ---------- -------- -- ---- ---- - ----------------- ------------------- ----- ------ ------------------- ----- -
上面的代码中，我们通过 @import 引入了 mc-color 和 mixin-map 两个混合。然后，我们自定义了一个颜色 $my-color，并使用了 mc-color 混合生成了 200 和 800 两个颜色的 CSS 代码。
混合方式的好处在于，我们可以自定义颜色，而不需要重新定义变量。同时，这种方式也不会出现命名冲突问题。
除了 mc-color，material-colors-scss 还提供了其他很多混合，支持生成不同种类的颜色（例如辅助色、警告色、背景色等）以及不同深度的色调（例如 100、200、300 等）。具体混合方式和用法可以参考 material-colors-scss 的官方文档。
总结
在本文中，我们介绍了如何使用 npm 包 material-colors-scss 获取 material design 的配色方案，并通过实例介绍了该库的使用方法。无论是变量方式还是混合方式，material-colors-scss 都是一个非常方便的工具，能够帮助我们快速引用和使用 material design 的颜色。
当然，除了 material-colors-scss，还有很多其他的 UI 风格和配色方案可供选择。选择适合自己项目的配色方案，不仅可以提高用户体验，也可以让我们的网站或应用更加具有个性化特色。希望这篇文章能够帮助读者更好地掌握 material-colors-scss 的使用方法，同时也能够对大家在选择配色方案时提供一定的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da28e