Bagaimanakah saya boleh menggunakan pembolehubah untuk mencipta nama harta secara dinamik dalam LESS?

Menggunakan pembolehubah dalam nama sifat dalam LESS (sifat dinamik / interpolasi nama sifat)

LESS tidak menyokong sifat yang dimasukkan secara dinamik pada masa ini, walaupun terdapat beberapa perbincangan mengenai topik mengenai Limpahan Tindanan.

Penyelesaian #1: Suntikan Sifat Dijana Secara Dinamik ke dalam Nilai Harta

Penyelesaian ini menyuntik sifat yang dicipta secara dinamik ke dalam nilai sifat berkod keras:

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

Penyelesaian #2: Suntikan Sifat Dijana Secara Dinamik ke dalam Nama Kelas Mengikuti (KURANG < 1.4.0)

Ini penyelesaian membina kelas maya atau set peraturan yang merangkumi vendor dan membina kelas seterusnya secara rekursif:

.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*/};
}

Penyelesaian #3: Suntikan Sifat Dijana Secara Dinamik ke dalam Nama Kelas Berikut (KURANG 1.4.0 )

Versi ini menggunakan rekursi untuk mengatasi had dalam KURANG 1.4.0:

@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);
}
Dalam LESS versi 1.6 dan ke atas, interpolasi nama sifat dilaksanakan secara asli, jadi tiada penyelesaian diperlukan.
Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan pembolehubah untuk mencipta nama harta secara dinamik dalam LESS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!