将Bootstrap 3与Sass一起使用

Bootstrap带有响应式网格，以及一些我们可以用来快速构建响应式网站的常见Web组件。 如果您看过我们以前在Bootstrap上发布的文章，您可能知道Bootstrap样式是使用LESS组成的。

尽管LESS通过1.5版中引入的新功能变得更加强大，但有些人可能对Sass / SCSS更为熟悉。 Sass中可能还存在一些您无法缺少的功能，但是LESS中还没有这些功能（尚未）。 如果您想使用Boostrap并与Sass一起工作，多亏了Thomas McDonald ，您可以这样做，因为Bootstrap已被移植到Sass / SCSS 。

安装

有几种方法可以开始使用Bootstrap + Sass 。 首先，由于它已包含在Ruby gem中 ，因此您可以使用以下命令行通过Terminal安装它：

gem install bootstrap-sass

您还可以在下面的此命令中将它与Compass一起使用。 这与我们安装Zurb Foundation的方式相同。 但是，请注意，这种方式将只包含_variables.less包含Bootstrap变量，而styles.less放置您自己的样式规则。

compass create my-new-project -r bootstrap-sass --using bootstrap

或者，您可以简单地从Github存储库下载它。

Bootstrap 3的新功能

这是Bootstrap 3中的一些新功能。

平面设计

您可以从新版本Bootstrap 3中立即看到的更改是，它现在包含平面设计。 我们在以前版本的组件中发现的渐变和阴影现已消失。

Bootstrap 3中的网格

Bootstrap还引入了一组新的类和新的网格结构。 在版本3中，有大，中，小和超小型网格，以适应不同的视口大小。 让我们看下面HTML示例：

<div class="container">
	<div class="row">
		<div class="column col-md-4 col-sm-6">
			<p>Left Column</p>
		</div>
		<div class="column col-md-4 col-sm-4">
			<p>Middle Column</p>
		</div>
		<div class="column col-md-4 col-sm-2">
			<p>Right Column</p>
		</div>
	</div>
</div>

我们有三列。 在较大的视口尺寸（在台式机屏幕上或平板电脑上为横向）上查看时，每列具有相等的宽度。 该大小适用于col-md-4类。

然后，当屏幕尺寸变小时，将使用col-sm-*类来调整列宽划分，以便像以前版本的Bootstrap一样，列宽可以保持正确的比例，而不是仅仅堆叠在一起。

新组件

在版本3中还添加了一些新组件 。其中包括Pager （用于构建Next-Prev类型的导航）， List Group ， Panels和Page Header 。

利用Sass函数

从技术上讲，我们可以像上面的示例一样，将Bootstrap类添加到HTML元素中以进行网站布局。 但是，当使用像Sass这样CSS预处理程序时，我们可以利用一些功能来实现更简洁，更语义化HTML结构，而不必填充无意义的类名。

给定前面的示例，我们可以将结构以及类名更改为以下形式：

<div class="container">
	<div class="main-area">
		<div class="column content">
			<p>This is the Content.</p>
		</div>
		<div class="column sidebar">
			<p>This is the Sidebar.</p>
		</div>
		<div class="column side-nav">
			<p>This is the Navigation.</p>
		</div>
	</div>
</div>

在样式表中，我们可以使用Sass @extend指令来构建布局。 使用@extend将对共享相同样式规则的选择器进行分组。

.main-area {
	@extend .row;
}
.column {
	@extend .col-md-4;
}
.content {
	@extend .col-xs-6;
	@extend .col-sm-6;
}
.sidebar {
	@extend .col-xs-4;
	@extend .col-sm-4;
}
.side-nav {
	@extend .col-sm-2;
	@extend .col-sm-2;
}

另外，您也可以使用Sass @include ，它将从mixins复制样式规则并将其包含到我们的类选择器中。

.main-area {
	@include make-row;
}
.content {
	@include make-xs-column(6);
	@include make-sm-column(6);
}
.sidebar {
	@include make-xs-column(4);
	@include make-sm-column(4);
}
.side-nav {
	@include make-xs-column(2);
	@include make-sm-column(2);
}
.column {
	@include make-md-column(4);
}

现在，在浏览器中查看它，您将获得响应式布局。

结论

Bootstrap和Sass绝对是一个不错的组合。 使用Bootstrap，您可以在短短几个小时内构建一个可正常运行的响应式网站 。 Sass中的@extend和@include可以帮助我们编写更精简，可编程和可维护CSS 。 有关Sass的更多信息，请参考本文： Sass入门：安装和基础知识 。

那么，您是否尝试过Bootstrap + Sass？

翻译自: https://www.hongkiat.com/blog/bootstrap-and-sass/