2013-05-09 14 views
5

less.jsを使用して、JavaScriptでLESS変数を動的に変更しようとしています。しかし、modifyVarswatch、または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> 

答えて

1

代わりにクライアントサイドを置き換える変数を実行するのではなく、私はそれをRailsアプリケーションでやっていたので、サーバサイドに移動しました。 content_type: 'text/css'で解析結果をレンダリングし、AJAXリクエストを使用してレンダリングされたCSSにスタイルシートリンクを追加するためにRuby bindings for LESSを使用しています。

関連する問題