css - LessCSSでCSSクラス名を動的に設定するには?

Question

より具体的な子孫セレクターを作成するには、動的な名前を CSS クラスに追加する必要があります。

これが私のLessコードです:

@scope:  name;  //line1
.@scope .ui-widget{  color: #fff} //line2

しかし、2 行目でパーサー エラーが発生します。

LessCSSでCSSクラス名を動的に設定する方法はありますか?

Answer 1

バージョン 1.3 で、less.js と dotless にサポートが追加されました。

ブラケットとエスケープ文字列を使用する必要があります..例

(~".@{scope} .another") { 
  color: #fff;
}

編集

この形式は非推奨です。less 1.3.1 (現在は less.js のトランク ビルドのみ) は、より単純な構文をサポートします。

.@{scope} .another-class {
    color: white;
}

Answer 2

以下のコードを試して、期待される出力を取得してください

@scope:  name;//line1
(~".@{scope} .ui-widget")  {  color: #ffbbff}  //line2