Bootstrap 中很好用的5个SASS混入

正如你们许多人都可能知道，Bootstrap 是一个强大的前端开发工具包。它使我们能够生产出跨多个设备的简洁，响应式的网站。

下面我将向大家介绍5个很好用 Bootstrap 混入，我认为你应该尝试。可以节省你一些时间编码的下一个站点。在这篇文章中，我将专门讨论 SASS 版本的混入。

@mixin make-row()

The make-row() mixin does exactly what it says, generating a row in a grid. Why use this mixin versus just adding the .row class? Two reasons. The first is that we can use semantic code, so instead of:

we can use something like:

This way, we can use an appropriate tag (section, article, etc.) to specify a portion of the page. This can potentially make the code easier to read and understand what content goes in that row. All we have to do now is

Very useful as you can see, but the real utility of this mixin is unlocked when you combine its usage with the next mixin.

@mixin make-*-column()

This mixin works in conjunction with @mixin make-row() and is really a group of mixins. One of the mixins allows you to define the size of column you want to use while the others allow you to push, pull, and offset columns.

If you are familiar with Bootstrap (or any grid system), the grid system is based on rows that contain columns. Since there will probably never be a situation where you use one of the column mixins without the make-row() mixin and vice versa, you can have something like this to create the columns/rows:

The parent section creates the row that contains our nested columns. In this case each article will consist of 2 columns. As a result, you can create up to 6 article sections to span the page’s 12 columns.

If you have a site where each page has the same layout, you can create the entire layout in Sass. Even if each page is different, you can benefit by using these mixins to layout static parts of the site such as headers and footers.

@mixin size()

The size() mixin is a simple but extremely useful mixin. When creating rows and columns in Bootstrap, the default behavior is to size the columns based on their content. This is fine in a lot of situations, but sometimes you need a specific size. Thats where the size mixin comes in. It takes two arguments – width and height:

In this case I chose a percentage for the width (keeping it responsive). Of course you could always just set the width and height manually in plain CSS, but this does the same thing in a single line of code. This mixin also has a companion @mixin square(), which takes a single argument.

@mixin panel-variant()

One of the knocks most people have with Bootstrap is that most sites created with it look the same. This is because many people take the stock components and use them as is. Although this is perfectly fine, many of us who use Bootstrap customize every component we use.

The panel-variant() mixin helps in that regard by letting you easily style panels. The mixin takes four arguments$border, $heading-text-color, $heading-bg-color, and $heading-border.

In this example, I’ve created a class that includes the mixin and that will be used alongside Bootstrap’s panel classes:

@mixin button-variant()

Another mixin designed to let you easily customize Bootstrap components, the button-variant() mixin lets you style buttons. This mixin takes three arguments – $color, $background, and $border:

@mixin gradient-*()

This is actually a group of mixins that allow you to quickly create CSS gradients.

Examples include gradient-horizontal(), gradient-vertical(), and gradient-horizontal-three-colors(). Each mixin takes different arguments, so be sure to look at the source to determine which arguments you need.

The following mixin takes four arguments – $start-color, $end-color, $start-percent, $end-percent:

Conclusion

As you can see there are some powerful mixins built into Bootstrap. These 5 are only scratching the surface. Try digging into the mixins folder in Bootstrap’s repository and look around. Find out what arguments are needed and how you can use them, then try them out in your own projects. You will probably find yourself using some of these as your go-to mixins, just like I do.