3

LESS を使用し、変数を利用する Web サイトがあるとします。エンドユーザーに変数を変更する機能を提供するライブラリまたは何かが存在するかどうか疑問に思っていました。たとえば、クラスの背景色が変数で指定されている場合、ドロップダウン メニューで編集できるようにしたいと考えています。私は似たようなものを実装しようとしているので、そうする前に、既存のソリューションについて疑問に思っていました.

4

2 に答える 2

3

私は最近この問題に頻繁に遭遇し、多くのことを試した後、私の解決策は最終的に LESS を捨てて、素晴らしい JavaScript API を備えたStylusを使用することです。

いずれにせよ、これは JavaScript で LESS 変数を取得するために現在取り組んでいるものです。

var getLessVar = function (name, prop) {
  var value = $('<div class="' + name + '"></div>').hide().appendTo('body').css(prop)
  $('.' + name).remove()
  return /^\d+/.test(value) ? +value : value
}

ハッキーですが動作します。LESS でクラスを作成し、JS で取得する変数をプロパティに割り当てますwidthが、送信するデータの種類 (数値、色など) に応じて、他のプロパティにすることもできます。

@myvar: 30px + @foo;
.myvar { width: @myvar }

次に、JS で、次のような小さなスクリプトで変数を取得します。

var myvar = getLessVar('myvar', 'width')

これは、データを取得するために非表示の要素を作成するため、パフォーマンスには優れていませんが、機能します。

JS から変数を設定するのはもっと複雑ですが、いつでも AJAX マジックを一緒に実行しLessPHP、いくつかの基本的なパーサーを使用してvariables.less.

ただし、さらにパワーが必要な場合は、Stylus を使用してください。

于 2012-07-26T01:14:15.217 に答える