css - LESS のクラス名の文字列を連結する

Question

LESS を CSS に変換しています。そこで、以下の LESS 関数を実行します。

.myPL( @val ) {
   .pL @val{
    padding-left:@val;
   }
}

関数呼び出し:

.myPL( 20px );

期待される結果：

.pL20px{padding-left:20px}

しかし、実際の結果は Syntax Error です。

LESS でクラス名の文字列を連結するのを手伝ってください。

score 8 · Accepted Answer

あなたが探しているのはセレクター補間と呼ばれるものです...ここで見つけることができます：http://lesscss.org/#-selector-interpolation

ミックスインが機能するには、次のようにする必要があります。

.myPL( @val ) {
  .pL@{val} {
    padding-left: @val;
  }
}

score 1 · Accepted Answer

クラス名自体に残されたパディングの可能性のある各バリアントを手動で定義するのはなぜですか? それはLESSが設計されたものではなく、あなたが与えた文脈ではあまり意味がありません.

ミックスインのアイデアは、それらを再利用可能にすることですが、そのミックスインの途中でクラス名を呼び出す理由がわかりません。LESS ミックスインを適切に使用し、次のことを行います。

.pl(@val) {
    padding-left: @val;
}

score 1 · Accepted Answer

あなたが達成しようとしていることは、LESSでは機能しません:

あなたがすることができます：

.myPL( @val ) {
   padding-left: @val;
}

3 に答える 3