動的インジェクションの組み込み機能がない場合、LESS で動的プロパティ名を使用するにはどうすればよいでしょうか?

LESS での動的プロパティとプロパティ名の補間の使用

CSS SASS などの一部のプログラミング フレームワークは、@ 構文を使用したプロパティ名の動的挿入をサポートしています。プロパティの名前と値をセレクターに挿入できるようになります。これは、直接宣言せずに、複数のルールに共通のプロパティをオーバーライドしたり、変換を適用したり、複雑なスタイルを管理したりするための優れた方法です。

残念ながら、LESS にはそのような機能がありませんが、パラメトリック ミックスのさまざまな組み合わせを使用するいくつかの回避策が提供されます。 -ins、変数挿入 (e() 関数) およびパターン マッチング (@{ }) の構文。

オプション 1: e() 関数を使用してプロパティ名を挿入する

このメソッドには、動的に作成されたプロパティ名を別のプロパティの値に挿入することが含まれます。

.vendors(@property, @value...){
    -webkit-@{e(@property)}: @value;
       -moz-@{e(@property)}: @value;
        -ms-@{e(@property)}: @value;
         -o-@{e(@property)}: @value;
            @{e(@property)}: @value;
}

オプション 2: 次のクラス名にプロパティを挿入する (v1.3.3 以降)

この方法にはベンダーの定義が含まれます。ミックスインして、ベンダー プロパティを含む仮想クラス/ルールセットを構築します。次に、 ~ 構文を使用して 2 つのベンダー ブロックをバインドして次のクラスが構築されます。

.vendors(@property, @value, @rest:"") {
    @inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};";
}

.test(@nextclass){
    .vendors(transform, "matrix(2,0,0,2,20,20)");
    .vendors(transform-origin,"10px 10px", @inject);
    (~"{@{inject}} .@{nextclass}"){/*next class properties*/};
}

.this-class{
    .test(next-class);
}

オプション 3: 再帰を使用したプロパティの挿入 (Less v1.4.0 )

このメソッドは、less v1.4 を使用する場合の以前のメソッドの制限に対処し、ベンダー ブロックを構築して最終変数に注入するための再帰を導入します。

@nl: `"\n\t"`; 

.multi(@props,@vals,@i,@inj) {
    @property: extract(@props, 1);
    @value: extract(@vals, 1);
    @inject:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
}

.multi(@props,@vals,@i,@inj:"") when (@i > 0) {
    @property: extract(@props, @i);
    @value: extract(@vals, @i);
    @injnext:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
    .multi(@props,@vals,(@i - 1),@injnext);
}

@properties: "transform-origin" "transform";
@values: "10px 10px" "matrix(2,0,0,2,20,20)";

@p: ~"@{nl}width:20px; @{nl}height:12px; @{nl}background-color:#000;";

.this-class {
    .multi(@properties,@values,2,@p);
    @inj: ~"{@{inject}`'\n'`} `'\n'`.next-class ";
    @{inj} {/**/}
}

これらの回避策は、動的プロパティを作成する方法を提供します。 LESS で名前を付けますが、他のフレームワークの組み込み機能を使用するほど洗練されていません。 LESS 1.6 のリリースでは、動的なプロパティ名の補間が実装され、このプロセスがはるかに単純になりました。構文はオプション 2 と似ており、プロパティ名に @{ } を使用します。

以上が動的インジェクションの組み込み機能がない場合、LESS で動的プロパティ名を使用するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。