Comment puis-je obtenir des noms de propriétés dynamiques dans LESS pour appliquer les préfixes des fournisseurs sur plusieurs navigateurs ?

Variables dans les noms de propriétés dans LESS

Les préprocesseurs CSS comme LESS vous permettent de générer du CSS de manière dynamique en fonction de variables et de logique. Une tâche courante consiste à créer des règles CSS qui appliquent des préfixes de fournisseurs multi-navigateurs aux propriétés CSS.

LESS Dynamic Property Names

LESS n'offre actuellement pas de prise en charge directe des noms de propriétés dynamiques. Cependant, vous pouvez utiliser des solutions de contournement pour obtenir des fonctionnalités similaires.

Solution de contournement 1 : Utilisation de e() et @{ }

Dans les versions LESS inférieures à 1.6, vous pouvez utiliser e() et @{ } pour injecter dynamiquement des noms de propriétés :

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

Solution 2 : injecter des propriétés dans la classe suivante

Vous pouvez également injecter des propriétés dans le nom de la classe suivante en utilisant la récursivité :

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

Interpolation de nom de propriété dans LESS 1.6

À partir de la version 1.6 de LESS, l'interpolation de nom de propriété est directement implémentée :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!