css - 如何在 CSS 文件中保留 LESS 变量？

Question

我创建了一个 LESS 文件并为颜色定义输入了一些变量：

@white:     #fff;
@black:     #000;

生成 CSS 文件时，我丢失了所有变量，现在我不能使用 less.modifyVars 因为 CSS 文件没有任何 LESS 变量。

自动保存 CSS 时如何保留 LESS 变量？

Answer 1

LESS 解析为 CSS。因此，无论您在 LESS 中使用它们的什么地方，这些变量都会被它们的值替换。您的“自动保存”功能应始终将 LESS 解析为 CSS，它是您包含在项目中的 CSS 文件。

要完整（来自我的评论）：“less.modifyVars 是一种帮助方法，您可以使用它在生成 CSS 之前动态更改一些变量。 ”

Answer 2

我认为您误解了如何modifyVars使用。这是我发现的一个例子：

<link rel="stylesheet/less" type="text/css" href="theme-1488.less">
<script src="less-1.4.2.js" type="text/javascript"></script>
<script>
        less.modifyVars({'@SCREEN_BODY_WIDTH' : '50px'});
</script>

请注意，页面中包含.less文件，而不是.css文件。