下面我将向大家介绍5个很好用 Bootstrap 混入，我认为你应该尝试。可以节省你一些时间编码的下一个站点。在这篇文章中，我将专门讨论 SASS 版本的混入。
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 (
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
|1 2 3||
Very useful as you can see, but the real utility of this mixin is unlocked when you combine its usage with the next mixin.
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:
|1 2 3 4 5 6||
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.
|1 2 3 4||
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.
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:
|1 2 3||
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.
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.
|1 2 3||
In this example, I’ve created a class that includes the mixin and that will be used alongside Bootstrap’s panel classes:
|1 2 3 4 5 6 7 8||
Another mixin designed to let you easily customize Bootstrap components, the button-variant() mixin lets you style buttons. This mixin takes three arguments –
|1 2 3||
This is actually a group of mixins that allow you to quickly create CSS gradients.
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 –
|1 2 3||
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.