没有样式的较少css导入规则

Question

我有vars.less文件，代码如下：

@base: #96959A;
.ts_no{ text-shadow: none; }
.pos { position: absolute; z-index: 2; display: block; }

...

编译的vars.css：

.ts_no {
  text-shadow: none;
}
.pos {
  position: absolute;
  z-index: 2;
  display: block;
}

我的文件较少，其中包括vars.less（@import'vars'）。因此所有这些文件都有vars.less样式。所以编译的所有css文件都包含已编译的vars.less文件的样式：

的style.css：

.ts_no { text-shadow: none; }
.pos { position: absolute; z-index: 2; display: block; }

...

在一个文件中包含变量和mixin的最佳方法是什么，而不是在所有文件中重复？

谢谢

Answer 1

可能最简单的方法就是将mixins定义为参数 mixins，类似于＆＃34; functions＆＃34;用其他语言。当然，参数mixins通常采用参数，但如果你不需要接受任何参数，你可以简单地省略它们并使用空括号。

这意味着重写您的vars.less文件，如下所示：

@base: #96959A;
.ts_no() { text-shadow: none; }
.pos() { position: absolute; z-index: 2; display: block; }

这将阻止规则集出现在已编译的CSS输出中，只要它未在另一个规则集中明确使用。

documentation提供了更多详细信息。