没有样式的Less 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，而不需要在所有文件中重复定义？

谢谢。

- dark_kz

Answer 1

可能最简单的方法就是将你的mixin定义为参数化mixin，类似于其他语言中的“函数”。当然，通常参数化mixin需要接受参数，但如果你的mixin不需要接受任何参数，你可以简单地忽略它们并使用空括号。

这意味着你需要像这样重新编写你的vars.less文件：

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

这将防止规则集在未被显式地用于另一个规则集时出现在编译后的CSS输出中。

文档提供了更多细节信息。

- Cody Gray