3 ms·
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 c
by kh_hk 13y ago
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 13y agoAlternatively 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 https://github.com/twbs/bootstrap-sass
- moretti 13y agoLess has the same feature: http://lesscss.org/features/#extend-feature http://lesscss.org/features/#extend-feature
- bluetidepro 13y agoThank 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 13y agoTo be fair, Sass did have it about 3 years before LESS
- kh_hk 13y agoThen, 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 13y agoa rule of thumb I've been following when using Sass/LESS: If your mixin doesn't take arguments, you probably want `@extend`