less.js - パーサーのコールバック内で変数値を取得

Question

less.js（1.3.0）を使用してクライアント側でCSSを解析する回数を減らしています。パーサのコールバックの中で、私は各変数の値を取得したい。私は成功せずに次のことを試みた。

var data = "@colour: red; #example { background-color: @colour; }", 

parser = new less.Parser({}); 
parser.parse(data, function (error, root) { 
    console.log(root.toCSS()); 

    var varsDef = root.variables(); 
    for (k in varsDef) { 
    console.log(varsDef[k]); 

    // how to get the value for the var? 
     //not working 
    console.log(varsDef[k].eval()); 
     //not working 
    console.log(varsDef[k].toCSS()); 
     //is an object but looking for a string value 
    console.log(varsDef[k].value); 
     //returns an empty string 
    console.log(varsDef[k].value.toCSS());     
    } 
}); 

eval（）もtoCSS（）も結果がありませんでした。私はパーサの内部的な動作が少ないことを理解していません。各変数オブジェクトには、オブジェクトである変数プロパティvarsDef [k] .valueがあります。しかし、私は変数の文字列値が必要です。

誰も変数の値を文字列として取得する方法を知っていますか？値

varsDef[k].name 

は、それが可変であるので、変数名

varsDef[k].toCSS() 

は何も返さないでなければなりません

Answer 1

varsDef[k].value.toCSS() 

をする必要があります - CSS変数に出力しません。

Answer 2

私は最近、この問題に遭遇して、あなたのように、私は非常にあなたが上記の書いたコードのようしかし

@redColor: #900; // responds to .toCSS() 
@fooColor: desaturate(@redColor, 20%); // both of these error out 
@barColor: lighten(@fooColor, 10%); // when calling .toCSS() 

の線に沿って、複雑な変数のためのようなものを実行しているのと同じ本能を持っていた、ので、それは私のビット

@barColorのネストされたtree.Valueは、このパースツリーのネストされた表現であるため、役に立たないと言うでしょう。つまり、barcolor: {[value: {value: [{lighten: {...}}]}]}またはsomesuchです。なぜなら私はいつも私がtree.toCSSを呼び出すことに応答しないいくつかのオブジェクトで終わることになるので、私はそのルートをあきらめました。 redColorがある場合

その代わり、私が好き、インポートルールとナンセンスルールとナンセンス.lessファイルを生成してやったので

@import "varfile.less"; 

.foo { 
    redColor: @redColor; 
    fooColor: @fooColor; 
    barColor: @barColor; 
} 

喜んでそのようなファイルを解析するあまり、それは気にしません。本当のCSSプロパティであるかどうかにかかわらず、それは単にそれを無視し、それが忠実に行われなければならないすべての置換を行います。したがって、実際には簡単に解析できる単一のルールCSSファイルが作成されます。このファイルは非常に簡単にマークアップされているためです。

.foo{ 
    redColor: #990000; 
    fooColor: #8a0f0f; 
    barColor: #b81414; 
} 

これは、偶然、あるを解析するための最も簡単なファイル：それはこのようになります。それは実際にはjsonに変えられるか、あなたに何がありますか。ここへの道はかなりコミカルです。私はルールがない変数はルール自体の中で修正されるフェア・ゲームだからだと思うが、私はそれを単に合理化できる。

最終的な値を抽出したいと思っているだけで、少ない値の意味値ではないと仮定すると、かなり便利です。セマンティクスが必要な場合は、実際の少ないファイルを解析するほうがよいでしょう。

私はノードでこれを書いてしまったと私はそれがどう感じたか怪しいに私自身の異議を過ぎました後に、それは非常によく働いたと私に私のプロジェクトの変数とJSONの辞書を供給しました。あなたは見てみることができます。nsfmc/less-extractorのgithubにあります。基本的には基本設定ファイルをとり、stdoutにjson dictを書き込みます。それはおいしいですが、それはちょっとハックされていても完全に機能します。

オリジナルの質問では、このクライアントサイド全体を実行することについて尋ねました。そのため、githubプロジェクトは除外されているように見えますが、アイディアは非常に似ています。元のlessファイルをxhrの一部として要求を解析して変数名を取得し、少ない文字列を作成して解析し、コードの残りの部分のみを文字列に変換して解析します。

あなたを助ける希望！

Answer 3

また、パーサの問題もありました。そのようにすると、ツリーノードの再帰的なチェックでばかげていました。

生成されたCSSとは対照的に、実際の値が（上記の答えに従って）犠牲にならない場合は、おそらくファイルのテキストを手動で解析することをお勧めします。

この関数は、指定されたlessファイル内の各変数のキーと値のペアを返します。もしLESSファイルが1行に複数の値を持っていればうまく動作しません。私はそれを使ってブートストラップの変数ファイルを解析しました。これはうまく動作します。

getLessVars = (lessStr) -> 
    lines = lessStr.split('\n') 
    lessVars = {} 
    for line in lines 
    if line.indexOf('@') is 0 
     keyVar = line.split(';')[0].split(':') 
     lessVars[keyVar[0]] = keyVar[1].trim() 
    return lessVars