前言
在现今的前端开发中，快速准确的完成布局成为了一个重要的指标。这个时候 CSS 框架就成为了一个不可忽视的工具。其中 Bootstrap 和 Foundation 都是很受欢迎的框架。但是，如果我们的页面只需要一个具有简单布局功能的框架，那么使用这些大型的框架显得过多余，因为它们会带来很多不必要的代码和资源。这时候，我们就需要一个小而美的工具类库——bubbly-grid-sass，它可以帮助我们快速实现简单的网格布局。
安装
bubbly-grid-sass 是一个由 Sass 编写的包，它可以快速集成到项目中。首先需要先安装 Node.js 和 npm（https://nodejs.org/zh-cn/）。
安装过 Node.js 和 npm 后，我们需要打开命令行终端，使用下面的命令来安装 bubbly-grid-sass：
npm install bubbly-grid-sass
安装完成后，你就可以在自己的项目中愉快的使用它了。
基本用法
Sass 文件引用
首先，在我们的项目中创建一个新的 Sass 文件，例如 styles.scss。在这个文件中，我们需要使用 @import 引用 bubbly-grid-sass 的代码。
// 引用 bubbly-grid-sass 的 Sass 文件
@import "~bubbly-grid-sass/sass/_grid.scss";
// 自定义样式
body {
background-color: #f7f7f7;
}引用成功后，我们可以开始使用它提供的类名了。
HTML 元素布局
bubbly-grid-sass 提供了以下几个类名，使用这些类名可以实现网格系统的布局：
- .container：设置父级容器宽度为 100%，用于包裹行和列；
- .row：用于布置列；
- .col：用于布置列；
这些类名的使用与 Bootstrap 差不多。
我们需要按照以下方法将我们的 HTML 元素放置到网格系统中：
-- -------------------- ---- -------
------
---- ------------------
---- ------------
---- ---------- -----------------
---- ---------- -----------------
---- ---------- -----------------
---- ---------- -----------------
------
------
-------这里的 .col-sm-3 表示，在小屏幕设备上，每一行包含 4 列，每一列占 3 格宽度。类名的命名规则是 .col + 屏幕大小缩写 + 列宽度，例如 .col-sm-3 表示在小屏幕设备上，每一列占 3 格宽度。
分栏和偏移
除了基本的列的布局，bubbly-grid-sass 还提供了关于分栏和偏移的布局样式，使用起来很简单。
-- -------------------- ---- ------- ---- ------------ ---- ---------- ----------------- ---- ---------- ----------------- ------ ---- ------------ ---- ---------- -------- ---------------------- ---- ---------- -------- ---------------------- ------ ---- ------------ ---- ---------- -------- ------------------------ ---- ---------- ----------------- ------
这里的 .col-sm-push-4 表示，在小屏幕设备上，这一列往后推 4 格宽度。.col-sm-pull-4 则是往前拉 4 格宽度，.col-sm-offset-3 则是在这一列宽度的基础上再宽 3 格。
样式定制
使用 bubbly-grid-sass，你可以在自己的样式表里修改一些默认的选项，例如栅格最大宽度、栏之间的间距和内边距等等。这个示例演示了如何改变栅格最大宽度。
-- -------------------- ---- ------- -- ------- ---------------- - ---- -- ------- ------------------------------------ -- ----------------- ----------------------- ------- -- ------------------------ -------------------------- ----- --------------------------- ----- -- ------------------ ---- - -------------- ------------------------- - -- -
结语
bubbly-grid-sass 是一个非常简单实用的 Sass 包，它可以让我们快速地布置网格系统，而不必使用庞大的框架，减少了无用的开销。希望这篇简单的教程可以帮助您更加高效地使用 bubbly-grid-sass。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde549e