LESSクライアント側を解析する

Question

LESSクライアント側を解析して結果を返すことはできますか？

私は現在ドキュメントで推奨されているように使用しています。これは、ファイルの数を減らし、後でパーサを小さくすることです。私はcssファイルとして保存できるように生のCSSを返すことができるようにしたい。

私はnode.jsなどをインストールしたくありません。クライアント側の解決策が必要です。

Answer 1

less.js sourceを見ると、Parserオブジェクトが表示されます。 less.jsと仮定すると、ページに含まれます。

var data = "@colour: red; #example { background-color: @colour; }", 
    parser = new less.Parser({}); 

parser.parse(data, function (error, root) { 
    // code that handles the parsed data here... 
    // e.g.: 
    console.log(root.toCSS()); 
}); 

意志の出力がコンソールに次

#example { 
    background-color: #ff0000; 
} 

less.Parserのコンストラクタは、実際に一連の設定を取り、私は十分に理解していませんLESSの内部で何が良いのだろうと言いました（しかし、それらはすべて省略可能ですが、どれも渡してもデフォルトを使うべきではありません）。

Parser.parseメソッドは、LESSファイルを含む文字列と、解析されたデータを処理するコールバックの2つのパラメータをとります。コールバックは、エラーオブジェクト（error）と解析されたLESS（root）を表すオブジェクトの2つのパラメータを受け取ります。致命的なエラーがあった場合はrootは渡されず、エラーがなければはnullになります。

残念ながら、エラーパラメータの属性については、ソースhereに設定されている場所よりも優れたドキュメントが見つかりません。

Answer 2

@ dbauppの回答は私にとっては大いに役立ちましたが、エラー処理方法が彼の答えに記載されているとは思いませんでした。

解析コールバック内でエラーに反応できないというエラーパラメータに渡されるのではなく、クライアント側の解析が少ないときにエラーがスローされることがわかりました。これは役に立つかもしれない場所の例として

// I too have no idea what to pass to less.Parser 
// but none of them seemed very useful for this 
// reading through the source 
var parser = new less.Parser({}), 
    toparse = '.foo {color: red;}'; 

try { 
    parser.parse(function (error, root) { 
     var css = root.toCSS(); 
     console.log(css); 
    }); 
} catch (e) { 
    // if we hit a 404 when importing a less file 
    // this is only thrown at the end of all the imports 
    // rather than as soon as it find one broken @import 
    if (e.name === 'TypeError' && e.message === "Cannot call method 'toCSS' of undefined") { 
     // handle typeerror here 

    // if there's a parse error 
    // assuming your original less file is just some @imports 
    // this will also tell you which file contains the error 
    } else if (e.line) { 
     // the url of the imported file 
     console.log(e.filename); 

     // the line containing the error 
     console.log(e.line); 

     // this is a 3 item array containing the line with the error 
     // +/- 1 line either side 
     // e.extract[1] will be your error 
     console.log(e.extract); 

     // this is the error message 
     console.log(e.message); 
    } else { 
     // it broke some other way 
     // I haven't had this happen to me yet 
     // so you'll have to figure it out for yourself ;) 
    } 
} 

、私のアプリケーションはmediawikiに少ないのサポートが追加されて、私は何もサーバ側にアクセスすることができないところが、サイトのCSSやJSファイルにアクセスすることができます。私はあまり自分自身を解析し、それを動作させるために私が必要とするだけだたて解析された以下の意味を持つ既存のCSSが有効になってJS置き換えることができます:)

Answer 3

は

ここでは実施例である： https://jsfiddle.net/y0oss091/1/

less.render("p{color: #ff66ff}") 
    .then(function(output) { 
     console.log(output.css) 
    }, 
    function(error){}); 

lessはCDNからロードされます。

多くのリソースがあります。
しかし、クライアントサイドでの使用がnpmとnodeのインストールより簡単であるとは確信していません。