将变量从 JSON 文件加载到 LESS CSS 预处理器中

是否可以像使用 Stylus 一样将变量从 JSON 文件加载到 LESS CSS 预处理器中？

与文件内容myvars.json

{
    "color1": "#112345",
    "color2": "#667890"
}

在 Stylus 中我...

json('myvars.json')
body{ background-color: color1; }

是否可以在 LESS 中做到这一点？

我想将文件保留为 JSON，这样我就可以轻松地在 javascript 中重复使用它。

In less.js您可以使用 javascript 插值（使用反引号）。并调用一个函数，该函数使用文件中的变量加载 json 对象...您可以从中通过其键提取变量 - 可能是这个方向的东西：

@json_file: myvars.json;

@json: ~`json = function($key) { var request = new XMLHttpRequest(); request.open("GET", "@{json_file}", false); request.send(null); var my_json = JSON.parse(request.responseText); return my_json[$key]; }`;

body {
  background-color: ~`json('color1')`;
}

这可能看起来不太优雅，但它确实有效。一个更优雅的选择可能是在中定义您的自定义用户函数调用脚本之前的全局 LESS 对象 http://lesscss.org/#usage，但我从来没有真正费心去玩它，因为我总是在开发中使用 LESS 客户端。

您可以做的另一件事是在 javascript 中加载 json 文件（在浏览器中调用 LESS 脚本之后）并使用less.modifyVars()使用 json 变量重新编译 LESS 的函数。您可以在 html 中执行以下操作（这里我使用纯 JS，但如果您使用 jQuery.getJSON，则更简单）：

<link rel="stylesheet/less" href="style.less" type="text/css">
<script type="text/javascript">less = { env: "development" };</script>
<script src="http://rawgithub.com/less/less.js/master/dist/less-1.4.1.min.js" ></script>
<script type="text/javascript">
    var request = new XMLHttpRequest();
    request.open("GET", "myvars.json", false);
    request.send(null);
    var my_json = JSON.parse(request.responseText);
    less.modifyVars(my_json);
</script>

在你的 LESS 样式文件中是这样的：

@color1: darkblue; //default value - will get overwritten by .modifyVars()

body {
  background-color: @color1;
}

另一个注意事项：LESS 中的所有变量名都必须以at sign (@）。但是，json 变量不需要，因为less.modifyVars()自动在变量前面加上@如果丢失。

希望这能给您一些想法。可能有更好的方法来做到这一点......但这两种方法对我有用。