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

Question

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

随着文件的内容 myvars.json

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

在手写笔中我做...

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

这看起来可能并不优雅,但它确实有效.一个更优雅的选项可能是在调用脚本之前在全局LESS对象中定义自定义用户函数,但我从来没有真正打扰过它,因为我一直在开发中使用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()自动为变量添加@if if missing.

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