Last Variablen in LESS CSS Präprozessor aus JSON-Datei

Question

Ist es möglich, Variablen in LESS CSS Präprozessor aus einer JSON-Datei zu laden, wie Sie mit Stylus tun können?

Mit Inhalt der Datei myvars.json

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

In Stylus kann ich ...

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

Ist es möglich, dies in weniger zu tun?

Ich möchte die Datei als JSON behalten, damit ich sie einfach in Javascript wiederverwenden kann.

Answer 1

In less.js Sie die Verwendung von Javascript-Interpolation (mit den Back-Ticks) machen. Und rufen Sie eine Funktion, die das JSON-Objekt mit den Variablen aus der Datei geladen ... von dem Sie die Variable durch ihren Schlüssel extrahieren können - etwas in diese Richtung vielleicht:

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

könnte dies nicht super elegant aussehen, aber Es klappt. Eine elegantere Möglichkeit wäre wahrscheinlich die benutzerdefinierte Funktion in den global LESS object before calling the script zu definieren, aber ich störte nie wirklich damit spielen, wie ich sich immer WENIGER clientseitige gerade in Entwicklung benutze.

Eine andere Sache, die Sie tun können - lädt die JSON-Datei in Javascript (nach dem Aufruf der LESS-Skript im Browser) und mit der less.modifyVars() Funktion, LESS mit den Json-Variablen neu zu kompilieren. Sie können entlang dieser Linien in Ihrem HTML etwas tun (ich hier Ebene JS verwenden, aber es ist auch einfacher, wenn Sie jQuery.getJSON verwenden):

<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> 

und so etwas in Ihrer WENIGER Stil-Datei:

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

body { 
    background-color: @color1; 
} 

Ein weiterer Hinweis: Alle Variablennamen in LESS müssen mit einem unter Zeichen (@) beginnen. Allerdings müssen die json Variablen nicht zu, weil less.modifyVars() automatisch die Variablen mit einem @, wenn sie fehlt prepends.

Hoffe, das gibt Ihnen einige Ideen. Es könnte bessere Wege geben, es zu tun ... aber diese zwei Ansätze funktionierten für mich.

Answer 2

Wenn weniger in-Browser gibt es auch ‚globalVars‘ Option, die verwendet werden können, Variablen zu setzen, bevor die LESS-Dateien geladen werden: nur veröffentlichen http://lesscss.org/usage/#using-less-in-the-browser-options

Answer 3

Wenn Sie nicht weniger in Browser verwenden, aber die CSS kompilieren, ich ein Schluckplugin, um diesen Job zu machen.

Es kann wie folgt aussehen:

css/myvars.json

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

less/styles.less

@json-import "myvars.json"; 

body { 
    background-color: @color1; 
} 

gulpfile.js

var gulp = require('gulp'); 
var less = require('gulp-less'); 
var lessJsonImport = require('gulp-less-json-import'); 

gulp.task('less', function(){ 
    gulp.src(['./less/**/*.less', '!./less/**/_*.less']) 
     .pipe(lessJsonImport()) 
     .pipe(less()) 
     .pipe(gulp.dest('./css')); 
});