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

Question

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

这是我的设置。我有一个名为 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 文件中创建了许多冗余样式，这些样式也在 base.css 文件中。我希望通过导入 base.less 文件，它会跳过创建任何冗余样式。

有办法吗？

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.

这似乎正是您要找的。