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

Posted 2023-03-06

【中文标题】导入使用mixins的less文件时可以避免重复的css吗？

【英文标题】：Can I avoid duplicate css when importing a less file that uses mixins?

【发布时间】：2014-02-02 22:18:59

【问题描述】：

我正在尝试使用 Bootstrap 3 附带的更少的 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 文件，它会跳过创建任何 redudnt 样式。

有没有办法做到这一点？

【参考方案1】：

Less 1.5 introduces Reference Imports:

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

例如如果你有

.a 
    color: green;

在一个文件中并导入它

@import (reference) "file.less"; 则不会输出该文件， 但你可以这样做

.b 
    .a;

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

这似乎正是您想要的。

【讨论】：

为了清楚起见，我的解决方案是将@import "base.less"; 替换为@import (reference) "base.less";

太棒了，这是一个很棒的提示！