Bagaimanakah saya boleh mencapai nama sifat dinamik dalam LESS untuk menggunakan awalan vendor merentas penyemak imbas?

Pembolehubah dalam Nama Harta dalam LESS

pra-pemproses CSS seperti LESS membolehkan anda menjana CSS secara dinamik berdasarkan pembolehubah dan logik. Satu tugas biasa ialah membuat peraturan CSS yang menggunakan awalan vendor merentas penyemak imbas pada sifat CSS.

Kurang Nama Harta Dinamik

LESS pada masa ini tidak menawarkan sokongan langsung untuk nama sifat dinamik. Walau bagaimanapun, anda boleh menggunakan penyelesaian untuk mencapai kefungsian yang serupa.

Penyelesaian 1: Menggunakan e() dan @{ }

Dalam versi KURANG di bawah 1.6, anda boleh menggunakan e() dan @{ } untuk menyuntik nama sifat secara dinamik:

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

/*example*/
.test {
    .vendor(transform, translateX(20px));
}

Penyelesaian 2: Menyuntik Sifat ke dalam Kelas Seterusnya

Anda juga boleh menyuntik sifat ke dalam nama kelas seterusnya menggunakan rekursi:

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

Interpolasi Nama Harta dalam KURANG 1.6

Setakat versi LESS 1.6, interpolasi nama harta tanah dilaksanakan secara langsung:

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

/*example*/
.test {
    .vendor(transform, translateX(20px));
}

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencapai nama sifat dinamik dalam LESS untuk menggunakan awalan vendor merentas penyemak imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!