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;
}

而且我的文件更少，其中包括 vars.less (@import 'vars')。所以所有这些文件都有 vars.less 样式。所以所有编译的 css 文件都包含编译的 vars.less 文件的样式：

样式.css：

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

...

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

谢谢你

score 4 · Accepted Answer

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

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

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

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

该文档提供了更多详细信息。

1 回答 1