Bootstrap fuente tour -mixins de lectura (1)

Muy enredado, la forma de introducir mixins Bootstrap en ella? Antes mixins Bootstrap desconocidas que no hay necesidad de decir, ¿por qué entonces? Hay muchos que dicen mixins relación específica estructura del DOM, tales como las siguientes 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%);
  }
}

Se trata de una estructura muy simple css dom.
Bueno, somos la fuente del viaje, que no puede hacer Bootstrap? Nada de qué preocuparse ciego! A continuación, con el fin de introducirlo. .

alerts.less

Código sobresalen, la norma 800 palabra ensayo inmediatamente :-)

// 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%);
  }
}

Nombre .alert variante de esto, al ver que con la alerta sobre, variante indica que se utiliza para crear diferentes estilos de alerta, que es una variante (variante).
Ajuste el color de fondo, color del borde, y color de fuente. H que aparece en el borde superior también proporciona el color, el color del borde dim 5 por ciento Zhenti. ¿Qué .alert-vincular la aparición de color que el color de fuente general opaca 10%.

fondo-variant.less

// Contextual backgrounds

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

Variantes de fondo. definir rápida el color de fondo. Teniendo en cuenta los enlaces que (a) la libración efecto y de enfoque, y el color de fondo oscuro 10% más alto que el color global de fondo.

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

Rápida estableció un mixin redondeada cierta dirección, arriba y abajo cuatro direcciones!

mixins simples dirían dos

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

Sólo decir un simple, tuvo un puntos complejos. Crear un estilo de botón utilizado. Hay dos mixin, uno .button-variante, uno de tamaño .button. El primero define el aspecto de los botones, incluyendo color de fuente, color de fondo y color del borde. Pensar en ello tantos botones pueden definir las propiedades de la barra. El último se define el tamaño del botón, el tamaño de fuente para ajustar la altura de la línea que, filete de radios y el relleno.
Complejo variante .button, sin duda, el código tanto! ! También tiene en cuenta:
- el estilo en el estado del foco
- bajo el estilo de estado estacionario
- el estilo en el estado activo
- estilo en el estado disalbed
- en conjunto con desplegable cuando utilice el estilo
- cuando contiene la placa, estilo insignia

Se puede considerar menos amplio verdadera ah vaca! ! !

centro-block.less

// Center-align a block level element

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

centro de bloques. Por lo general, como escribir con un total de:

#content{
 margin:0 auto;
}

Muy similar a la!

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

flotado claro. También proporciona un enlace http://nicolasgallagher.com/micro-clearfix-hack/ . Agradable! !
Justo aquí, es pegar el código, jeje