Migme-CSS 是一个基于 Sass 构建的样式库，我们可以通过使用 npm 包方便的在项目中引入，从而使用其中的样式来加快前端的开发速度。
安装
在开始使用 migme-css 之前，您需要首先在项目中安装该 npm 包。您可以使用以下命令来安装：
npm install migme-css --save-dev
引入
在安装 migme-css 后，您需要在项目中引入该样式库。在 Sass 中，您可以使用 @import 来引入外部的 Sass 文件。我们可以在项目的主 Scss 文件中添加以下代码：
@import 'node_modules/migme-css/dist/migme.css';
如果您希望只引入该样式库中的某些部分，您也可以根据需要引入其它 Sass 文件。例如，如果您只想使用 migme-css 中的表格样式，您可以在 Scss 文件中添加以下代码：
@import 'node_modules/migme-css/src/components/table';
使用
在您完成了 migme-css 的引入后，您就可以在项目中使用该样式库中的样式了。
在 HTML 中，您可以直接使用 migme-css 中定义的类名来应用相应的样式。例如，migme-button 类可以用来将一个元素样式为一个 migme 风格的按钮：
<button class="migme-button">Click me</button>
在使用 migme-css 的样式时，您还可以使用常见的 Sass 后代选择器来扩展和覆盖其中的样式。例如，以下代码将一个列表中的第一个元素的样式变为粗体：
ul li:first-child {
font-weight: bold;
}当然，在使用 migme-css 过程中，您需要遵循其代码结构和类名规则，以免影响到其它样式的正常加载。
示例
接下来，我们将通过一个简单的示例来展示如何使用 migme-css 中的样式。在这个示例中，我们将创建一个在鼠标悬停时显示提示框的 div 元素。
HTML 代码：
<div class="migme-tooltip" title="Hello, world!">I have a tooltip!</div>
SCSS 代码：
-- -------------------- ---- -------
-------------- -
--------- ---------
-------- -------------
-- --------
---------------------------- -
-------- -----
-
--------------- -
-------- ------------
-------- ------
--------- ---------
---- -----
----- ----
---------- -----------------
-------- ------- -------
-------------- --------
----------- -----
----------- - --- --- ------- -- -- -----
---------- ---------
------------ -----
-
-在这个示例中，我们使用了 migme-tooltip 类，来设置元素的基础样式。接着，我们通过 display: none 隐藏了元素的默认提示框，并通过 &:hover::before 伪元素来添加自定义的提示框。当鼠标悬停在元素上时，该伪元素将会被显示。
总结
通过使用 npm 包 migme-css，我们可以轻松的在项目中引入和使用该样式库中的样式，从而加快前端的开发速度。在使用 migme-css 时，我们需要遵循其类名规则，以免影响到其它样式的正常加载。同时，我们可以使用常见的 Sass 后代选择器来扩展和覆盖其中的样式，从而实现更加灵活的样式控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f64