从JSON文件将变量加载到LESS CSS预处理器中 [英] Load variables into LESS CSS preprocessor from JSON file

问题描述

有可能从JSON文件中加载变量到LESS CSS预处理器，就像你可以用Stylus一样。

使用文件 myvars .json

  {
color1：＃112345，
color2：＃667890
} 
  

  json（'myvars.json'）
 body {background-color：color1; } 
  

是否可以在LESS中执行此操作？

我想将文件保存为JSON，因此我可以在javascript中轻松地重复使用它。

解决方案

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对象中定义自定义用户函数，但我从未真正打过另一件事你可以做的是 - 在javascript中加载json文件（调用LESS后）脚本）并使用 less.modifyVars（）函数用json变量重新编译LESS。你可以在你的html中这样做（在这里我使用纯JS，但它甚至更简单，如果你使用jQuery.getJSON）：

 < link rel =stylesheet / lesshref =style.lesstype =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; //默认值 - 将被.modifyVars（）覆盖。
 
 body {
 background-color：@ color1; 
} 
  

另一个注意事项： LESS中的所有变数名称以 符号开头（ @ ）。但是，json变量不需要，因为 less.modifyVars（）自动用 @ 缺少。

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

Is it possible to load variables into LESS CSS preprocessor from a JSON file like you can do with Stylus?

With contents of file myvars.json

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

In Stylus I do...

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

Is it possible to do this in LESS?

I want to keep the file as JSON, so I can easily re-use it in javascript.

解决方案

In less.js you can make use of javascript interpolation (using the back-ticks). And call a function that loads the json object with the variables from the file ... from which you can extract the variable by its key - something in this direction perhaps:

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

this might not look super elegant, but it works. A more elegant option would probably be to define your custom user function in the global LESS object before calling the script, but I never really bothered playing with that, as I was always using LESS client-side just in development.

Another thing that you can do - is loading the json file in javascript (after calling the LESS script in the browser) and using the less.modifyVars() function to recompile LESS with the json variables. You can do something along this lines in your html (here I use plain JS but it's even simpler if you use 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>

and something like this in your LESS style file:

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

body {
  background-color: @color1;
}

Another note: all variable names in LESS have to begin with an at sign (@). However, the json variables do not need to, because less.modifyVars() automatically prepends the variables with an @ if missing.

Hope this gives you some ideas. There might be better ways to do it ... but this two approaches worked for me.

这篇关于从JSON文件将变量加载到LESS CSS预处理器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！