导入使用mixins的较少文件时，我可以避免重复的css吗？

Question

我正在尝试使用Bootstrap 3附带的less mixins来创建更多的语义代码。

这是我的设置。我有一个名为base.less的文件，看起来像这样：

@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);
}

然后我有一个名为article.less的文件，其中包含我的某些页面上非常需要的样式，所以我只想在必要时包含该css。

@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);
}

正在发生的事情是article.css文件中创建的许多redundent样式也在base.css文件中。我希望通过导入base.less文件，它将跳过创建任何redudnt样式。

有办法做到这一点吗？

Answer 1

Less 1.5 introduces Reference Imports：

  

我们有另一个导入选项 - 参考。这意味着任何   将导入变量或mixins或选择器，但不会输出。

     

e.g。如果你有

.a {
    color: green;
}

     

在文件中并导入

     

@import (reference) "file.less";然后不会输出该文件，   但你可以做到

.b {
    .a;
}

     

和color: green;仅在.b选择器内输出。   这也适用于扩展，因此您可以使用扩展来带来复杂   选择器从less或css文件组到主文件中。一   用例可能是从bootstrap中获取一组选择器而不是   包括整个图书馆。

这似乎正是您所寻找的。