Bootstrap & LESS: importing mixins only as reference

Question

I am using Bootstrap 3.0 & LESS 1.5. I\'ll be using the same bootstrap.css for many sites (or use their CDN). So I am using

@import (reference) \"bootstr         


        

Answer 1

Also see: https://stackoverflow.com/a/14463540/1596547. Which says:

No actual code will output from that file as CSS, but all becomes available to use as mixins.

In you case their will be a difference with for example make-sm-column() this mixin contains a media query definition. If you use (reference) when importing mixins.less this media query part is NOT include in your CSS.

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

Will give:

.herocontainer {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .herocontainer {
    float: left;
    width: 33.33333333333333%;
  }
}

With using (reference) you will only got:

.herocontainer {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

NOTE you also use btn-lg with came from buttons.less. For me it seems the best solution to reference button.less but not mixins.less (theoretical mixins should contain mixins only, so referencing should make any difference). Otherwise create a mixins.less with only the mixins you will need.

UPDATE

1. there is a bug Reference import not importing media queries
2. when a class in a referenced import calls a mixin from a not referenced import, the output of this mixin will be (unexpected) shown in your css. So in the answer above not using reference for mixins.less will indeed give a lot of unwanted classes