介绍
对于前端开发者来说，CSS 是一个必不可少的技能。然而，纯 CSS 的开发也会涉及到非常复杂的样式，如响应式布局、CSS 动画等等。好在有越来越多的便捷工具可以协助我们的样式开发，而其中一个非常有用的工具就是 bourbon-libsass。
bourbon-libsass 是一个可以帮助我们更快速开发 CSS 样式的 Sass 工具库。它具有相当齐全的函数、混合宏以及变量，不仅包含了 SASS 原生语言所拥有的特性，还有优秀的响应式布局设计。
这篇文章将会介绍如何在项目中使用 bourbon-libsass。
安装
要使用 bourbon-libsass，首先我们需要在项目中引入它。一般情况下，我们使用 npm 进行安装并引入模块化框架之中。在终端中，我们可以使用如下的命令进行安装：
npm install bourbon --save-dev
由于 bourbon-libsass 是基于 Sass 的语言编写，所以我们还需要在项目中安装 Sass 工具：
npm install node-sass --save-dev
以上命令会将 Sass 安装在我们项目的 node_modules 目录之中。现在我们准备好在项目中使用 bourbon-libsass。
引入
安装好模块之后，我们需要在 Sass 之中引入 bourbon-libsass。找到 Sass 的主文件，一般命名为 main.scss，然后在该文件的顶部添加如下代码：
@import "bourbon";
接下来，我们就可以进行样式的开发了。
使用
bourbon-libsass 提供了一系列的混合宏和函数，可以让我们更加便捷地完成样式的编写。
网格系统
网格系统是网页布局的基础，而 bourbon-libsass 提供了一套完整的网格系统方案。在使用这个网格系统之前，我们需要先定义一个容器：
.container { @include outer-container; }
接下来，我们可以生成一个四列的基础网格：
.row { @include grid-row; & > [class*='column-'] { @include grid-column(4); } }
当然，bourbon-libsass 还提供了很多其他的组合方案，如 span-columns、shift、push、pull 等等。具体使用详见官方文档。
字体
bourbon-libsass 提供了非常便捷的字体处理方案。我们可以直接使用混合宏 font-size 来设定字体大小：
.text { @include font-size(16px); }
bourbon-libsass 还提供了 line-height、font-family、font-weight 等多个混合宏，可以让我们更加快速地完成文本样式的定义。
边框
使用 bourbon-libsass 还可以非常便捷地处理边框。混合宏 border-radius 可以让我们直接对元素设置圆角：
.box { @include border-radius(5px); }
border 混合宏可以让我们快速生成边框样式：
.box { @include border(1px solid #ccc); }
bourbon-libsass 还提供了 box-shadow、outline 等边框相关的混合宏，让我们可以非常快速地完成整个项目的样式开发。
示例代码
这是一个基于 bourbon-libsass 的示例代码，包含了网格系统、字体和边框三个模块：
-- -------------------- ---- ------- -- ---- ---- ------------------ ---- ------------ ---- --------------- ------ ---- ---- ----- ------ ---- --------------- ------ ---- ---- ----- ------ ---- --------------- ------ ---- ---- ----- ------ ------ ---- ------------ ---- ---------------- ----------- ------ ------ -- ---- ------- ---------- ---------- - -------- ---------------- - ---- - -------- --------- - - ------------------ - -------- --------------- - - ----- - -------- ---------------- ------ ----- - ---- - -------- ------------------- -------- ---------- ----- ------ ------- ------ -展开代码
总结
bourbon-libsass 是一个非常有用的 Sass 工具库，可以让我们非常便捷地完成整个项目的样式开发。通过这篇文章的学习，相信你已经知道如何在项目中正确地安装和使用 bourbon-libsass，希望能对你的样式开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e68
