css - 更少的没有样式的 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;
}

我还有一些 less 文件，其中包括 vars.less (@import 'vars')。所以所有这些文件都有 vars.less 样式。所以所有编译的 css 文件都包含编译的 vars.less 文件的样式:

样式.css:

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

...

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

谢谢

Answer 1

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

这意味着像这样重写你的 vars.less 文件:

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

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

documentation提供更多详细信息。