lessパーサーにパラメータを持つ.lessファイルを挿入する方法

Question

パーサーのインスタンスを作成して、より少ないパーサー（less.jsコンパイラ）にパラメータを持つファイルを動的に挿入するにはどうすればよいですか？

私はさまざまなテーマを持っています。ユーザーは任意のテーマを選択できます。ユーザーがテーマを選択すると、関連する.lessファイルをクライアント側で適切なパラメータでコンパイルしたいと考えています。

function writeCSS(color,other) { 
    var lessCode = ''; 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.status == 200 && xmlhttp.readyState == 4) { 
      var options = {} 
      lessCode = xmlhttp.responseText; 
      less.render(lessCode, options, function (error, output) { 
      if (!error) { 
       $("style").append(lessCode.css); 
      } 
      else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>'; 
      }); 
     } 
    }; 
    xmlhttp.open("GET", "/Content/Style.less?baseColorTheme='222222'&otherTheme='222222'&direction='ltr'", true); 
    xmlhttp.send(); 
} 

Answer 1

主に2つのアプローチがあります。通常、.lessファイルは、「資産パイプライン」の一部としてCSSに事前に準拠しています。このプロセスは、ビルドの自動化またはスクリプトで監視されます。詳細は、言語とツールセットによって異なります。ユーザーが新しいテーマを選択すると、サイトのCSSリンクがプリコンパイルされたCSSファイルに変更されます。 jQueryを使って、同様のスタイルシートのリンクを仮定：

var newTheme = 'theme2.css'; 
$('#theme-css').attr('href', newTheme); 

CSSテーマチェンジャーis hereの作業例：

<link id="theme-css" rel="stylesheet" href="theme1.css"> 

を変更はのように簡単になります。

アセットパイプラインを確立して、Lessファイルを同等のCSSにあらかじめコンパイルしたくない場合は、ほぼ同じことをその場で行うことができます。トリックは、スクリプトとしてless.jsライブラリをロードした後、テーマの変更をトリガーするためにもう少し作業を行うことです。

var newTheme = 'theme2.less'; 
$('style[id^=less]').remove(); 
$('#theme-css').attr('href', newTheme); 
less.refresh(); 

第一および第三の線はほとんど同じです。 less.jsがあなたの.lessアセットのコンパイル済みバージョンとして追加するCSSスタイルシートを削除するには、新しい2行目が必要です。最後の行で手動でless.jsが実行されます。

Less-basedテーマチェンジャーの実行中のバージョンis here。

オンラインLessコンパイラが示すように、任意のLessコードをとり、実行中にコンパイルすることができます。しかし、テーマの設定では、一般に、既知のソースファイルのセットを切り替えるだけで十分です。これにより、Lessソースが整形式でもコンパイル可能でもない場合に発生するエラー状態を処理する必要が少なくなります。