Bootstrap source Tour -mixins Reading (1)

Really tangled, how to introduce Bootstrap mixins in it? Before unfamiliar Bootstrap mixins there is no need to say, so why then? There are many mixins saying dom structure specific relationship, such as the following 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%);
  }
}

This is a very simple css dom structure.
Well, we are the source of the trip, who can not Bootstrap do? Nothing to worry about blind! Then in order to introduce it. .

alerts.less

Code stick out, the standard 800 word essay immediately :-)

// 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 name from this, to see that with the alert about, variant indicates that it is used to create different styles of alert, it is a variant (variant).
Set the background color, border color, and font color. Hr which appears on the top border also provides color, border color dim 5 percent Zhenti. Which .alert-link the emergence of color than the overall font color dull 10%.

background-variant.less

// Contextual backgrounds

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

Background variants. Quick define the background color. Taking into account the links which (a) the effect hover and focus, and the background color of dark 10% higher than the overall background color.

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;
}

Quick set a certain direction rounded mixin, up and down four directions!

Simple mixins would say two

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;
}

Just say a simple, got off to a complex points. Create a button style used. There are two mixin, one .button-variant, one .button-size. The former defines the appearance of buttons, including font color, background color and border color. Think about it so many buttons can define the properties of the bar. The latter is defined button size, the font size to adjust the line height which, fillet radii and padding.
Complex undoubtedly .button-variant, the code so much! ! It also takes into account:
- the style in the focus state
- under the hover state style
- the style in the active state
- Style in disalbed state
- in conjunction with dropdown when using style
- when containing the badge, badge style

Can be considered less comprehensive real cow ah! ! !

center-block.less

// Center-align a block level element

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Block center. We usually like to write with a total of:

#content{
 margin:0 auto;
}

Very similar to the!

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;
  }
}

Clear float. It also provides a link http://nicolasgallagher.com/micro-clearfix-hack/ . that's nice! !
Right here, is paste the code, hehe