导入较少使用mixin的文件时，是否可以避免重复css？

我试图使用Bootstrap3附带的较少的mixin来创建更多的symantic代码

这是我的设置。我有一个名为

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

文件，它可以跳过任何冗余样式的创建

有办法做到这一点吗？

：

我们还有另一个导入选项-引用。这意味着任何 变量、混合或选择器将被导入，但不会输出

e、 g.如果你有

.a{
颜色：绿色；
}

在一个文件中，并导入它

@import（reference）“file.less”则该文件将不会被输出，
但你可以做到

.b{
A.
}

和
颜色：绿色将仅在
.b
选择器内输出。
这也适用于extends，因此您可以使用extends来实现复杂的
选择器将less或css文件分组到主文件中。一个
用例可能是从引导中获取一组选择器，而无需
包括整个图书馆

这似乎正是您想要的。
而且我的解决方案是替换
@import“base.less”@import（reference）“base.less”的code>太棒了，这是一个很棒的提示！