在前端开发中，CSS 是必不可少的一部分，掌握好 CSS 可以大大提升我们的开发效率。而在日常开发中，我们可能会遇到需要更加高效、可复用的 CSS 布局的情况。这时候，npm 包 matter-kit-css 就可以为我们提供帮助了！
matter-kit-css 简介
matter-kit-css 是一个面向 Web 开发者的 CSS 工具包，在其官方网站上有这样一句话：
Matter-Kit-CSS is a well organized, thoroughly documented, and constantly developing CSS/Sass library full of new ideas from the web development community
意思是：matter-kit-css 是一个经过组织、文档完善，经过不断更新的 CSS/Sass 库，它汇集了来自 Web 开发社区的许多新创意。
使用 matter-kit-css 可以简化样式表、提高样式表可读性，并可提升网站整体设计的一致性。
相关说明
在开始使用 matter-kit-css 之前，需要先安装该 npm 包：
npm install matter-kit-css
安装完成后，你就可以在你的项目中引入该库的 CSS 文件了。在 JavaScript 中引入 matter-kit-css 代码如下所示：
import 'matter-kit-css';
matter-kit-css 基础
一般而言，matter-kit-css 的目录结构非常严谨，其主要结构如下：
-- -------------------- ---- ------- -------------- --- ------------- - --- ------ - --- ---------- --- --- - --- -------- - --- -------- - --- ------------ - - --- ------------ - - --- ------------- - - --- ----------- - - --- -------------- - - --- ----------- - - --- ----------- - - --- --- - --- ------- - --- ----------- - --- ---- - - --- ---------- - - --- ----------- - - --- ----------- - - --- ---------------- - --- ------ - - --- ------------ - --- ------------------- - --- --------- --- ------------
其中，如下几个文件和目录是比较重要的：
src：源代码目录src/3_components：主要提供了 Web 开发中常见组件的样式库src/5_utilities：常用工具类库，主要提供了一些工具类样式src/base：基础 CSS 样式src/custom：自定义 CSS 样式src/matter-kit-css：整合了上述各模块的主要入口文件
在使用 matter-kit-css 之前，需要首先进行一些初始化操作以达到一些基础样式的统一：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------------- ----- ---------------- --------------- ------------------------------------------------------------ ------- ------ ----------------------- ------- -------------- -------- ------- -------
在这个页面中，我们可以看到，在不添加任何样式之前，页面中的元素已经带来了基础的样式。因为在使用 matter-kit-css 之后，它会自动添加一些常见的样式到页面中。
接下来，我们可以根据我们需要的组件进一步引入 matter-kit-css 的组件类进行使用，例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------------
----- ---------------- --------------- ------------------------------------------------------------
-------
------
------------------ ---------
----------------- -----------------------------------------
---- ------ -- ---
------- -----------------------
---- ---- -- ---
---- -------------
---- ------------------------------------- ----------------- ---------------------
---- ------------------
--- ----------------------- -------
-- --------------------------
-- -------- ------------------------
------
------
-------
-------上述示例中引入了 Button 和 Card 组件。当然，我们也可以根据需要引入该库中提供的其它组件。
matter-kit-css 进阶
除了使用 matter-kit-css 提供的样式库之外，我们还可以使用该库提供的 mixin 方法，通过灵活组合使用不同 mixin 方法生成自己需要的样式。
例如，使用 @include 引入 flex-center-y 和 font-bold mixin 方法：
// 一条文字，垂直水平居中
.center-text {
@include flex-center-y;
@include font-bold;
}上述 flex-center-y 和 font-bold mixin 方法都是 matter-kit-css 样式库中提供的常用 mixin 方法，可以直接在自己的项目中使用，大大提高了 CSS 样式的复用性和效率。
定制化 matter-kit-css
在某些特定的情况下，我们可以考虑对 matter-kit-css 样式库进行个性化定制。matter-kit-css 也提供了自定义样式的接口。在自定义样式中，我们可以覆盖默认样式，以生成自己想要的样式。
例如，默认情况下 matter-kit-css 中的 Card 组件背景颜色是白色，在某些应用场景中，我们可能需要将它改为灰色。这个时候，我们可以写一个自定义样式文件，比如 my-styles.css，并在该文件中将 .card 样式的背景颜色改为灰色：
.card {
background-color: gray;
}在页面中引入自定义样式库：
<link rel="stylesheet" type="text/css" href="./my-styles.css">
上述代码就可以让你达到将 matter-kit-css 的默认样式改为自定义样式的目的。
结语
在本文中，我们针对 matter-kit-css 库进行了详细的介绍，其中包括了它的特点、使用方法以及自定义样式等方面。希望能够帮助读者更好地了解该库，并且在实际应用中加以运用，实现更高效的 Web 开发。而 matter-kit-css 也只是众多 CSS 工具库中一个，希望本文能够为读者提供一些参考，更好地入门和使用前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822562