[kh_hk]

Be very wary, though, if you are using mixins to define these columns in a case-by-case basis, as this could lead to huge generated CSS (the properties of the column will be defined in each class the mixin has been used).

[spellboots]

Alternatively use SASS (and the bootstrap SASS port[1]) which doesn't has this problem, as it instead rewrites selectors.

i.e. if you have:

    .column {
      width: 100px;
      display: inline-block;
    }

And you do:

    .cool-sidebar {
      @extend .column;
    }

Then the generated css will be something like:

    .column, .cool-sidebar {
      width: 100px;
      display: inline-block;
    }

[1] https://github.com/twbs/bootstrap-sass

[moretti]

Less has the same feature: http://lesscss.org/features/#extend-feature

[bluetidepro]

Thank you so much for pointing this out, Moretti! It drives me crazy when people talk about the extend feature like only SASS has it. People are always underestimating how similar Less and SASS are.

[mikewhy]

To be fair, Sass did have it about 3 years before LESS

[kh_hk]

Then, in Bootstrap terms and since the grid syntax is offered in mixins, should it be used as follows

    .foo-class {
        &:extend(.col-md-4, .col-md-offset-8)
    }

instead of using the mixin?

    .foo-class {
        make-md-column(4);
        make-md-column-offset(8);
    }

[mikewhy]

a rule of thumb I've been following when using Sass/LESS: If your mixin doesn't take arguments, you probably want `@extend`