Hacker News Reader

Comment by kh_hk | Hacker News Reader

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).

View on HN

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

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

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.

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

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

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

Reply on news.ycombinator.com