LESS ルールの動的ロード 既存の制限 最初に LESS スタイルシートをロードする必要がありますless.js スクリプトの前。これは、スクリプトがレンダリング前に LESS スタイルを解析して解釈するためです。この順序を逆にすると、スタイルが解釈されなくなります。 動的読み込みソリューション less.js のバージョン 1.0.31 では、less.refreshStyles() メソッドが導入されています。このメソッドは を再コンパイルします。 type="text/less" 属性を持つタグ。</p> <p><strong>使用例</strong></p> <p>ページの読み込み後に LESS ルールを動的に読み込むには、次の手順に従います。</p> <ol> <li>less.js スクリプトを含めます。</li> <li>動的にロードする LESS スタイルシートが <style> で定義されていることを確認してください。 type="text/less" 属性を持つタグ。</li> <li>less.refreshStyles() メソッドを呼び出して、LESS ルールをコンパイルします。</li> </ol> <p><strong>更新されたテスト ケース</strong> </p> <p>次の更新されたコード例は、動的読み込みプロセスを示しています。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><script src="http://lesscss.googlecode.com/files/less-1.0.31.min.js"></script> <link rel="stylesheet/less" href="/static/less/dynamic.less" id="abc123"/> <script> console.log("refreshing styles..."); less.refreshStyles(); console.log("refreshed..."); </script></code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>LESS Stylesheet</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="less">@primary_color: green; #container { background: @primary_color; border-radius: 5px; div { color: red; } }</code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p>less.refreshStyles( ) メソッド、<style> で定義された LESS ルールID「abc123」のタグは動的にコンパイルされ、ページに適用されます。</p>
