前言
Sass 是一种 CSS 预处理器，以编程语言的形式描述样式，通过变量、函数、条件判断等特性，使写 CSS 更加方便快捷、可维护。在 Sass 中，Mixin 是一个定义了一组样式集合的代码块，可以在需要时引入到样式文件中，从而实现代码的复用和样式的一致性。
在实际开发中，我们可能需要使用一些常见的 Mixin，例如：清除浮动、媒体查询、字体定义等等。为了方便开发者使用，有些优秀的程序员将这些常见的 Mixin 封装成了 npm 包，使用时只需要在项目中引入即可，省去了手动编写 Mixin 的繁琐过程。
其中，useful-sass-mixins 就是一款非常好用的 Sass Mixin 库，涵盖了很多常见的 mixin 样式。下面我们来一步步学习它的使用。
安装
首先，我们需要使用 npm 安装此包。在控制台中输入以下命令：
npm install useful-sass-mixins --save-dev
其中：
npm install：npm 包管理器的安装命令；useful-sass-mixins：需要安装的包；--save-dev：将此包作为开发依赖（devDependencies）安装到项目中。
这样，我们就可以在项目中使用该包中的 Mixin 样式了。
使用
安装完成后，我们在项目中需要使用到这些样式时，只需要引入此包中的 SCSS 文件，即可使用其中的 Mixin 样式。
引入 SCSS 文件
在需要使用的 SCSS 文件中，使用以下语句引入 useful-sass-mixins：
@import "~useful-sass-mixins/index";
其中，~useful-sass-mixins/ 表示引入的是 node_modules 文件夹下的 useful-sass-mixins 包。
使用 Mixin 样式
在引入 useful-sass-mixins 后，我们就可以使用其中定义的 Mixin 样式了，下面以其中的 clearfix 为例，介绍如何使用。
.container {
@include clearfix();
}在上面的例子中，.container 是需要清理浮动的元素，clearfix() 则是 useful-sass-mixins 中定义的 Mixin 样式，用于清除浮动。使用 @include 指令即可调用此 Mixin 样式。
除此之外，useful-sass-mixins 还包含了很多其他的 Mixin 样式，覆盖了字体定义、媒体查询、文本截断、圆角等等。使用时，可以根据自己的需要找到对应的 Mixin，然后调用即可。
示例代码
下面给出一些常见的 Mixin 样式的示例代码。
清除浮动 clearfix
-- -------------------- ---- -------
----------- -
---------
------- -
-------- ---
-------- ------
-
------- -
------ -----
-
---------
------- -
----------- -------
--------------- -----
------- --
-
-媒体查询 media-queries
-- -------------------- ---- -------
-------------------- ---- ------ ----- -
--- --- -
------ --------- -
---------
-
-
--- ----- --- --- --- -
------ --- --------- -
---------
-
-
-使用示例：
-- -------------------- ---- -------
-------- -
------ -----
-------- -------------------------- -------- ----- -
------ ----
-
-------- -------------------------- --------- ----- -
------ ----
-
-文本截断 truncate-text
.truncate-text($width, $line-height) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: $width;
line-height: $line-height;
}使用示例：
.element {
@include truncate-text(200px, 1.5);
}圆角 border-radius
-- -------------------- ---- -------
----------------------- ---------- ----- -
--- --------- -
------------ -
-------------- --------
-
- ----- -
-------------- --------
-
-使用示例：
.element {
@include border-radius(10px);
}总结
使用 npm 包 useful-sass-mixins 可以极大地简化我们样式编写的过程，提高项目样式的一致性和可维护性。通过以上的学习，相信读者已经可以熟练地使用这个包中的 Mixin 样式了，但这只是 Sass 中 Mixin 的冰山一角，接下来建议读者在项目中不断尝试并熟悉常用的 Mixin 样式，提高自己的 Sass 技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1281e8991b448e6ce9