前言
在前端开发中，我们经常会用到 Sass 这个 CSS 预处理器来编写样式，因为 Sass 可以让我们更方便地编写样式代码，提高开发效率。而 Scss-mixins 就是一个优秀的 npm 包，它提供了许多实用的 Sass mixin，可以帮助我们更快速地编写出复杂的样式。本文就是要介绍这个工具包的使用方法和相关特性。
安装与引入
在使用 Scss-mixins 之前，我们需要先安装它。打开终端，输入以下命令：
npm install scss-mixins --save-dev
安装完成后，在项目中的 Scss 文件里引入 scss-mixins：
@import "~scss-mixins/index";
常用 mixin
1. Breakpoint
Breakpoint 可以用于响应式开发，可以帮助我们在不同的屏幕尺寸下设置不同的样式。例如：
-- -------------------- ---- -------
----------- -
------ -----
-------- -------------- -
------ ----
-
-------- -------------- -
------ ----
-
-在这个例子中，.my-element 的宽度在小屏幕下是 100%，在中屏幕下是 50%，在大屏幕下是 30%。md 和 lg 分别是设置的断点名。
2. Center
Center 用于将元素居中对齐。
.my-element {
@include center;
}这个 mixin 可以让.my-element 元素水平和垂直居中对齐。
3. Box-sizing
Box-sizing，用于设置盒模型的大小，可以避免我们在计算元素尺寸时出现错误。
.my-element {
@include box-sizing(border-box);
}这个 mixin 相当于给.my-element 元素设置了 box-sizing: border-box; 样式。
4. Fontface
Fontface 可以方便地引入自定义字体。
@include fontface('my-font', '/path/to/my-font.ttf');可以使用font-family: 'my-font'; 来使用这个字体。
5. Triangle
Triangle 可以用来绘制三角形。
.triangle-right {
@include triangle(right, 10px, black);
}这个例子是用 Triangle 绘制了一个黑色的右三角形，大小是 10px。
总结
Scss-mixins 为 Sass 的开发提供了很多实用的 mixin 函数，可以帮助我们快速编写出符合规范的样式。本文介绍的只是其中的一些常用 mixin，更多 mixin 的使用方法可以查阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583281e8991b448d560c