変数を使用して LESS でプロパティ名を動的に作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

変数を使用して LESS でプロパティ名を動的に作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-14 21:59:02

オリジナル

925 人が閲覧しました

How can I use variables to dynamically create property names in LESS?

LESS でのプロパティ名での変数の使用 (動的プロパティ / プロパティ名の補間)

LESS では、このトピックに関するいくつかの議論にもかかわらず、現在、動的に挿入されたプロパティをサポートしていません。スタックオーバーフロー。

回避策 #1: 動的に生成された注入プロパティをプロパティ値に挿入する

この回避策は、動的に作成されたプロパティをハードコーディングされたプロパティ値に挿入します。

.vendors(@property, @value, @pre: ect) {
  -inj:~&quot;@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}&quot;;
}

ログイン後にコピー

回避策 2: 動的に生成されたプロパティを名前に挿入する次のクラスの (LESS

この回避策は、ベンダーを含む仮想クラスまたはルールセットを構築し、次のクラスを再帰的に構築します。

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

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

ログイン後にコピー

回避策 #3: 動的に挿入生成されたプロパティを次のクラスの名前に組み込みます (LESS 1.4.0) )

このバージョンは、LESS 1.4.0 の制限を克服するために再帰を使用します。

@nl: `&quot;\n\t&quot;`;

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

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

ログイン後にコピー

LESS バージョン 1.6 以降では、プロパティ名の補間がネイティブに実装されるため、回避策はありません。必要です。

以上が変数を使用して LESS でプロパティ名を動的に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。