javascript - 从 JSON 文件加载变量到 LESS CSS 预处理器

Question

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

包含文件 myvars.json 的内容

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

我在 Stylus 中...

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

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

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

Answer 1

在 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')`;
}

这可能看起来不太优雅，但它确实有效。一个更优雅的选择可能是在 global LESS object before calling the script 中定义您的自定义用户函数。 ，但我从来没有真正费心去玩这个，因为我总是在开发中使用 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 符号 (@) 开头。然而，json 变量不需要，因为 less.modifyVars() 会自动在变量前面加上 @(如果缺少)。

希望这能给你一些想法。可能有更好的方法...但这两种方法对我有用。