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) "bootstrap-3.0.0/less/bootstrap.less";
@import (reference) "bootstrap-3.0.0/less/mixins.less";

to import only as reference.

My app.less has (among otherthings)

.herocontainer{
    .make-row();
    .iphoneblock{
        .make-sm-column-offset(1);
        .make-sm-column(4);
        text-align: center;
    }
    .copyblock{
        .make-sm-column(5);
        text-align: center;
        .copytext{
            @media(min-width: @screen-sm) {
              padding-top: 100px;
              }
        }
        .buybutton{
            .btn-lg;
            .btn-primary;
            background-color: #d6822f;
            }
    }
}

The resulting site is just single column output. But if I remove (reference) from the mixins, like:

@import (reference) "bootstrap-3.0.0/less/mixins.less";

then I get a two column responsive output, but the resulting css also has classes that I don't need.

So, a) how do I get classes in css only for the ones that I write in app.less and not bloated with bootstrap classes b) how do I go about debugging such css issues? (I do use Google chrome tools but this issue is more than I can understand/debug)

Thank you,
Joseph

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