真的很纠结，怎么去介绍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;
}

很类似了！

扫描二维码关注公众号，回复： 10196774 查看本文章

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/。真好！！
就到这里吧，都是粘贴代码，嘿嘿