26

スタイラスでできるように、変数を JSON ファイルから LESS CSS プリプロセッサにロードすることは可能ですか?

ファイルの内容でmyvars.json

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

スタイラスでは...

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

LESSでこれを行うことは可能ですか?

ファイルをJSONとして保持したいので、JavaScriptで簡単に再利用できます。

4

5 に答える 5

20

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 オブジェクトでカスタム ユーザー関数を定義することでしょう。

あなたができるもう1つのことは、（ブラウザでLESSスクリプトを呼び出した後）javascriptでjsonファイルをロードし、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 のすべての変数名は、アットマーク ( @) で始める必要があります。ただし、変数の先頭にif missingless.modifyVars()が自動的に追加されるため、json 変数は必要ありません。@

これがあなたにいくつかのアイデアを与えることを願っています。それを行うためのより良い方法があるかもしれません...しかし、この2つのアプローチは私にとってうまくいきました。

于 2013-10-09T02:29:39.937 に答える
3

ブラウザーで LESS を使用せずに CSS をコンパイルする場合は、gulp プラグインを公開してこの作業を行います。

次のようになります。

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'));
});
于 2016-07-06T13:35:56.157 に答える
0

ブラウザーで LESS を使用する場合、LESS ファイルをロードする前に変数を設定するために使用できる「globalVars」オプションもあります: http://lesscss.org/usage/#using-less-in-the-browser-options

于 2015-08-10T13:20:02.303 に答える