Bootstrap源码之旅-mixins解读(1)

真的很纠结，怎么去介绍Bootstrap中的mixins呢？在不熟悉Bootstrap之前去说mixins没有必要，为啥呢？其中有好多mixins是跟它特定的dom结构有关系的，比如下面的alerts.less

// Alerts.alert-variant(@background; @border; @text-color) {  background-color: @background;  border-color: @border;  color: @text-color;  hr {    border-top-color: darken(@border, 5%);  }  .alert-link {    color: darken(@text-color, 10%);  }}

这是很简单的dom结构的css。
算了，都源码之旅了，谁还能不会Bootstrap吗？没事瞎操心！那就按照顺序来介绍吧。。

alerts.less

代码粘出来，800字作文马上达标:-)

// Alerts.alert-variant(@background; @border; @text-color) {  background-color: @background;  border-color: @border;  color: @text-color;  hr {    border-top-color: darken(@border, 5%);  }  .alert-link {    color: darken(@text-color, 10%);  }}

.alert-variant这名字起的，一看就知道跟alert有关，variant则预示着它是用来创建不同风格的alert的，所以是变体（variant）。
设置了背景色，边框色和字体色。对其中出现的hr的上边框颜色也规定了，比真题的边框色暗淡5%。其中出现的.alert-link的颜色要比整体的字体颜色暗淡10%。

background-variant.less

// Contextual backgrounds.bg-variant(@color) {  background-color: @color;  a&:hover,  a&:focus {    background-color: darken(@color, 10%);  }}

背景的变体。快速定义背景颜色。同时兼顾其中的链接(a)的hover和focus的效果，背景色比整体背景色暗淡10%。

border-radius.less

// Single side border-radius.border-top-radius(@radius) {  border-top-right-radius: @radius;   border-top-left-radius: @radius;}.border-right-radius(@radius) {  border-bottom-right-radius: @radius;     border-top-right-radius: @radius;}.border-bottom-radius(@radius) {  border-bottom-right-radius: @radius;   border-bottom-left-radius: @radius;}.border-left-radius(@radius) {  border-bottom-left-radius: @radius;     border-top-left-radius: @radius;}

快速设置某个方向的圆角的mixin，上下左右四个方向！

简单的mixins就多说俩

buttons.less

// Button variants//// Easily pump out default styles, as well as :hover, :focus, :active,// and disabled options for all buttons.button-variant(@color; @background; @border) {  color: @color;  background-color: @background;  border-color: @border;  &:focus,  &.focus {    color: @color;    background-color: darken(@background, 10%);        border-color: darken(@border, 25%);  }  &:hover {    color: @color;    background-color: darken(@background, 10%);        border-color: darken(@border, 12%);  }  &:active,  &.active,  .open > .dropdown-toggle& {    color: @color;    background-color: darken(@background, 10%);        border-color: darken(@border, 12%);    &:hover,    &:focus,    &.focus {      color: @color;      background-color: darken(@background, 17%);          border-color: darken(@border, 25%);    }  }  &:active,  &.active,  .open > .dropdown-toggle& {    background-image: none;  }  &.disabled,  &[disabled],  fieldset[disabled] & {    &:hover,    &:focus,    &.focus {      background-color: @background;          border-color: @border;    }  }  .badge {    color: @background;    background-color: @color;  }}// Button sizes.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {  padding: @padding-vertical @padding-horizontal;  font-size: @font-size;  line-height: @line-height;  border-radius: @border-radius;}

刚说简单，就来了个复杂点的。创建button样式用的。有俩mixin，一个是.button-variant，一个是.button-size。前者定义按钮的外观，包括字体颜色，背景颜色和边框颜色。想想按钮也就这么多能定义的属性了吧。后者是定义按钮大小的，调整其中 字体的大小行高，圆角的半径和padding。
复杂的当属.button-variant，代码那么多！！它还考虑了：
- focus状态下的样式
- hover状态下的样式
- active状态下的样式
- disalbed状态下的样式
- 跟dropdown结合使用时的样式
- 其中包含badge时，badge的样式

能考虑那么全面真实牛呀！！！

center-block.less

// Center-align a block level element.center-block() {  display: block;  margin-left: auto;  margin-right: auto;}

块居中。跟我们平时总喜欢写的:

#content{ margin:0 auto;}

很类似了！

clearfix.less

// Clearfix//// For modern browsers// 1. The space content is one way to avoid an Opera bug when the//    contenteditable attribute is included anywhere else in the document.//    Otherwise it causes space to appear at the top and bottom of elements//    that are clearfixed.// 2. The use of `table` rather than `block` is only necessary if using//    `:before` to contain the top-margins of child elements.//// Source: http://nicolasgallagher.com/micro-clearfix-hack/.clearfix() {  &:before,  &:after {    content: " "; // 1    display: table; // 2  }  &:after {    clear: both;  }}

清浮动。其中还提供了链接http://nicolasgallagher.com/micro-clearfix-hack/。真好！！
就到这里吧，都是粘贴代码，嘿嘿