Bagaimanakah anda boleh menggunakan nama sifat dinamik dalam LESS, memandangkan ia tidak mempunyai ciri terbina dalam untuk suntikan dinamik?

Menggunakan sifat dinamik dan interpolasi nama sifat dalam KURANG

Sesetengah rangka kerja pengaturcaraan seperti CSS SASS menyokong suntikan dinamik nama sifat menggunakan sintaks @, membolehkan anda menyuntik nama dan nilai sifat ke dalam pemilih. Ini cara yang bagus untuk mengatasi sifat biasa merentas berbilang peraturan, menggunakan perubahan dan mengurus gaya kompleks tanpa mengisytiharkannya secara langsung.

Malangnya, LESS tidak mempunyai ciri sedemikian, tetapi ia menawarkan beberapa penyelesaian menggunakan pelbagai gabungan campuran parametrik -in, suntikan berubah (fungsi e()) dan sintaks padanan corak (@{ }).

Pilihan 1: Menggunakan Fungsi e() untuk Menyuntik Nama Harta

Kaedah ini melibatkan menyuntik nama hartanah yang dicipta secara dinamik ke dalam nilai harta lain. Walaupun tidak sopan, ia berfungsi.

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

Pilihan 2: Menyuntik Sifat ke dalam Nama Kelas Mengikuti (Kurang v1.3.3)

Kaedah ini melibatkan penentuan vendor campurkan dan kemudian bina kelas/set peraturan maya yang merangkumi sifat vendor. Kelas seterusnya kemudiannya dibina menggunakan sintaks ~ untuk mengikat dua blok vendor bersama-sama.

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

Pilihan 3: Menyuntik Sifat menggunakan Rekursi (Kurang v1.4.0 )

Kaedah ini menangani had yang sebelumnya apabila menggunakan kurang v1.4 , memperkenalkan rekursi untuk membina blok vendor dan menyuntiknya ke dalam pembolehubah akhir.

@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} {/**/}
}

Penyelesaian ini menyediakan cara untuk mencipta sifat dinamik nama dalam LESS, walaupun ia tidak seanggun menggunakan ciri terbina dalam rangka kerja lain. Dengan keluaran LESS 1.6, interpolasi nama sifat dinamik telah dilaksanakan, menjadikan proses ini lebih mudah. Sintaks adalah serupa dengan Pilihan 2, menggunakan @{ } untuk nama sifat.

Atas ialah kandungan terperinci Bagaimanakah anda boleh menggunakan nama sifat dinamik dalam LESS, memandangkan ia tidak mempunyai ciri terbina dalam untuk suntikan dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!