less.jsを使用して、JavaScriptでLESS変数を動的に変更しようとしています。しかし、modifyVars
、watch
、またはrefresh
で動作させることはできません。JavaScriptでページ内のLESS変数を動的に変更する
less.modifyVars({'@bg': '#00ff00'})
を使用してless.jsをロードする前にスタイルシートのリンクタグを入れてみましたが、バックグラウンドは変更されません。私が使用している以下のファイルは単純です:
@bg: #000;
body { background-color: @bg; }
私もthis questionで述べたように、less.js後にスタイルシートのリンクタグを入れてみました、そしてmodifyVars
、その後refresh
への呼び出しに続いてless.sheets.push($('#less-link')[0])
を使用します。背景色の変更はありません。
また、LESSファイルで@bg: #000;
をコメントアウトしてから、modifyVars
で設定しました。いいえ運:私はLess::ParseError: variable @bg is undefined
で終わります。
どのように動的に変数を変更し、これらの変更を反映するようにページの外観を更新できますか?
編集: hm、これはいくつかのRailsの魔法の可能性があります。私の少ないファイルを読み込んだとき、変数の定義はなくなり、私が見たのはbody { background-color: #000; }
でした。ページに埋め込まれた<style type="text/less">
のLESSブロックを使用してthis override LESS JavaScriptを使用すると、less.Override('@bg', '#00ff00')
で変数を変更でき、ページの背景色がすぐに変更されました。 this answerに感謝します。今度は<link>
の代わりに<style>
タグを使ってless.jsで試してみましょう。
編集:以下-1.3.3.min.jsはLESSはlink
タグにロードすることを希望するように見える - 私はmodifyVars
を使用しようとすると、私はTypeError: Cannot read property 'href' of undefined
を取得し、私のページは次のようになります。
<style type="text/less">
@bg: #000;
body {
background-color: @bg;
}
</style>
<script src="/assets/less-1.3.3.min.js?body=1" type="text/javascript"></script>