我有 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; }
...
在一个文件中包含变量和混入,而不是在所有文件中重复的最佳方式是什么?
谢谢
最佳答案
可能最简单的方法就是将您的混入定义为参数 混入,类似于其他语言中的“函数”。当然,通常参数混合会带参数,但如果你不需要接受任何参数,你可以简单地省略它们并使用空括号。
这意味着像这样重写你的 vars.less
文件:
@base: #96959A;
.ts_no() { text-shadow: none; }
.pos() { position: absolute; z-index: 2; display: block; }
这将阻止规则集出现在编译的 CSS 输出中,只要它没有在另一个规则集中明确使用。
documentation提供更多详细信息。
关于css - 更少的没有样式的 css 导入规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10185508/