Can I avoid duplicate css when importing a less file that uses mixins?

Question

I'm attempting to use the less mixins that come with Bootstrap 3 to create more symantic code.

Here's my setup. I have a file called base.less that looks something like this:

@import "../less/bootstrap.less";

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

Then I have a file called article.less that has styles that are aonly needed on some of my pages so I only want to include that css if I have to.

@import "base.less";

.test-class{
    color: blue;
}

.article-wrapper {
  .make-row();
}
.article-main {
  .make-md-column(6);
}
.article-box {
  .make-lg-column(8);
  .make-lg-column-offset(1);
}

What is happening is that a lot of redundent styles are being created in the article.css file that are also in the base.css file. I was hoping that by importing the base.less file that it would skip creating any redudnt styles.

Is there a way to do this?

Answer 1

Less 1.5 introduces Reference Imports:

We have another import option - reference. This means that any variables or mixins or selectors will be imported, but never output.

e.g. if you have

.a {
    color: green;
}

in a file and import it

@import (reference) "file.less"; then that file will not be output, but you could do

.b {
    .a;
}

and color: green; would be output inside the .b selector only. This also works with extends, so you can use extends to bring complex selector groups from a less or css file into your main file. One use-case might be to grab a set of selectors from bootstrap without including the whole library.

This seems to be exactly what you are looking for.