在前端开发中，CSS 是非常重要的一部分，而 Sass 又是一个非常流行的 CSS 预编译器，它可以让我们更方便的编写 CSS。而在这里介绍的 npm 包 sass-boilerplate，是一个专门为 Sass 前端工程师提供的 Sass 样板库，它包含了一系列的 Sass 碎片和 mixins，为 Sass 前端开发提供了极大的便利。
安装
首先，你需要安装 node.js，安装完成后，使用 npm 包管理工具进行 sass-boilerplate 的安装：
npm install sass-boilerplate --save-dev
使用
sass-boilerplate 的使用非常方便，我们只需要在 Sass 文件中导入即可：
@import 'sass-boilerplate/sass/sass-boilerplate';
使用之后，我们就可以利用它的 mixins 和变量等内容来编写我们的 Sass 代码了。
包含的内容
sass-boilerplate 包含了非常多的 Sass 碎片和 mixins，使得 Sass 开发变得更加简单和高效。下面简单介绍一下这些内容：
碎片
sass-boilerplate 中包含了非常多的 Sass 碎片，这些碎片主要是一些常用的 CSS 代码片段，包含指定浮动、清除浮动、字体设置、边框圆角、盒子阴影、文字截断等。
例如下面这个例子，是一个文字截断的碎片：
@mixin text-truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}我们只需要在需要的元素上使用这个碎片即可：
.my-element {
@include text-truncate();
}Mixins
sass-boilerplate 中也包含了非常多的 Sass Mixins，这些 mixins 能够提高我们的 Sass 编写效率。比如常用的浏览器前缀，选择器，动画等等。
例如下面这个例子，是一个使用 CSS3 动画的 mixin：
@mixin transition($property) {
-webkit-transition: $property;
-moz-transition: $property;
-ms-transition: $property;
-o-transition: $property;
transition: $property;
}我们只需要在需要使用动画的元素上调用这个 mixin 即可：
.my-element {
@include transition(background-color 0.5s ease);
}变量
sass-boilerplate 中也包含了一些常用的 Sass 变量，比如一些定义颜色的变量，还有一些定义 font-family 的变量等等，这些变量可以帮助我们更方便的进行样式定义。
例如下面这个例子，就是一个定义颜色变量的例子：
$white: #ffffff; $black: #000000; $gray: #666666;
定义好之后，我们就可以直接使用它们，而不需要一直写颜色的代码了：
.my-element {
color: $gray;
background-color: $white;
}总结
sass-boilerplate 是一个非常强大的 Sass 样板库，它包含了非常多的 Sass 碎片、mixin 和变量等内容，能够帮助我们更加快速地编写 Sass 代码。在 Sass 开发中，使用 sass-boilerplate 能够让我们事半功倍，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516081e8991b448ce800
