导入使用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

少1.5引入参考进口:

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

例如,如果你有

.a {
    color: green;
}

在文件中并导入它

@import (reference) "file.less"; 然后该文件将不会输出,但您可以这样做

.b {
    .a;
}

并且color: green;只会在.b选择器内输出.这也适用于extends,因此您可以使用extends将less或css文件中的复杂选择器组引入主文件.一个用例可能是从引导程序中获取一组选择器而不包括整个库.

这似乎正是您正在寻找的.