Class using mixin of same name generates double CSS

[mdo]

In Bootstrap 3 we've made a change to avoid generating CSS from our mixins.less file by doing something like the following:

// Mixin
.clearfix() {
  ...
}

// Assign the mixin to the class of a same name
.clearfix {
  .clearfix();
}

While this compiles no problem, it results in duplicate code in the generated CSS whenever the mixin is used.

Should we be doing this? If it's indeed valid Less (which it seems to be since it's compiling), I suppose this is a bug then?

(Relevant issue from Bootstrap: twbs/bootstrap#8557)

[matthew-dean]

Hey Mark!

You could do the following:

.clearfix {
  clearfix: value;
}

.box1:extend(.clearfix) {
   added: value;
}

Results in:

.clearfix,
.box1 {
  clearfix: value;
}
.box1 {
  added: value;
}

Note that this will result in the base class (.clearfix) being output. If you didn't want .clearfix to appear as a distinct CSS class, we're currently implementing two features to address that. (Note that this are not yet available.) One is extending mixins:

.clearfix() {
  clearfix: value;
}

.box1:extend(.clearfix) {
   added: value;
}

Which will result in:

.box1 {
  clearfix: value;
}
.box1 {
  added: value;
}

The other which is further in development is referencing a less file by reference.

@import (reference) mixins.less;

This will result in no CSS properties being generated until they are extended or used as a mixin. Bootstrap is actually one of the examples used for the reference feature, where people could, by default, import the entire Bootstrap library, but essentially map customized sections of the library to CSS classes they designate, as in:

@import (reference) boostrap.less;

.button-primary-because-i-like-long-class-names {
  .btn-primary;
}

// entire CSS output
.button-primary-because-i-like-long-class-names {
  // ... btn-primary properties and values
}

Try out the new LESS :extend feature. I think it would work great for minimizing CSS output for libraries like Bootstrap, especially for the use of clearfix.

Hopefully, we'll have mixin extending implemented soon, but we're still working out the syntax.

[jonschlinkert]

@mdo here is a comparison of using mixins to do this versus extend. (I used http://less2css.org/, screen caps were faster to illustrate...).

Keep in mind that, by default, :extend only targets exact selector specified. So you will need to use all to target nested selectors as well. Like this: :extend(.clearfix all)

Using Mixins

Using :extend

Hope this helps, let us know if we can do anything else to help.

(btw, this is a good use case for extending mixins.)

[jonschlinkert]

lol, sorry I started my answer earlier today then came back and didn't scroll to see that I basically duplicated @matthew-dean's answer. my bad

FWIW, I started using this convention (from the :extend example) with a number of non-parametric mixins, it really reduces generated CSS. There is a lot of opportunity to reduce code for grids, and other components with a lot of repetition.

[matthew-dean]

@jonschlinkert You added the bit about the "all" keyword, which is important info, especially for the traditional clearfix set of properties. :-)