Cara Menggunakan Pembolehubah dalam Nama Harta dalam KURANG: Sifat Dinamik atau Interpolasi Nama Harta?

Menggunakan Pembolehubah dalam Nama Harta dalam LESS (Sifat Dinamik / Interpolasi Nama Harta)

Apabila bekerja dengan LESS, menyesuaikan nama sifat CSS berdasarkan nilai dinamik boleh menjadi satu cabaran . Soalan ini meneroka had dan penyelesaian untuk mereplikasi campuran CSS khusus vendor yang menerima sifat dan nilai dinamik. Dalam Sass, mixin sedemikian akan menggunakan interpolasi nama harta benda.

Penghadan dalam KURANG:

Pada masa ini, LESS tidak mempunyai sokongan terbina dalam untuk penjanaan nama harta dinamik. Ini menjadikannya mustahil untuk meniru campuran awalan vendor secara langsung dalam LESS.

Penyelesaian:

Walaupun pengehadan ini, penyelesaian berikut menawarkan kaedah alternatif:

1. Suntikan Sifat Dijana Secara Dinamik ke dalam Nilai Harta:

Balut sifat dinamik dan nilai ke dalam sifat generik, seperti "penjual", dan masukkannya ke dalam nilai harta lain.

Contoh:

.vendors(@property, @value) {
  -inj: "~"@{property}: @{value}"";
}

.test {
  .vendors(transform, matrix(1, 0, 0, 1, 20, 20));
}

2. Suntikan Sifat Dijana Secara Dinamik ke dalam Nama Kelas Berikut:

Lanjutkan konsep mixin vendor. Buat berbilang kelas di mana kelas kemudiannya menyuntik peraturan vendor ke dalam nama mereka.

Contoh:

.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}"): {};
}

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

Penyelesaian Ditingkatkan untuk LESS v1.4.0 :

@nl: `"\n\t"`;
.multi(@props, @vals, @i, @inj) {
  // extract property and value from lists
  @property: extract(@props, 1);
  @value: extract(@vals, 1);

Atas ialah kandungan terperinci Cara Menggunakan Pembolehubah dalam Nama Harta dalam KURANG: Sifat Dinamik atau Interpolasi Nama Harta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!