csstwitter-bootstrapless-mixinsgutter

What is the role of mixins in bootstrap?


I am a beginner in bootstrap and I'm not able to understand this concept.

What's the meaning of the less code below?

// Creates  wrapper for a series of columns

.make-row(@gutter: @grid-gutter-width) {

  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

Solution

  • Are you already tried compile usage this mixin into css? I think it is self-explanatory. Mixins could be treated like simple functions (with parameters or without).

    Look at the compiled code.