Comment pouvez-vous utiliser des noms de propriétés dynamiques dans LESS, étant donné qu'il ne dispose pas de fonctionnalité intégrée pour l'injection dynamique ?

Utilisation de propriétés dynamiques et d'interpolation de noms de propriétés dans LESS

Certains frameworks de programmation comme CSS SASS prennent en charge l'injection dynamique de noms de propriétés à l'aide de la syntaxe @, vous permettant d'injecter les noms et les valeurs des propriétés dans un sélecteur. C'est un excellent moyen de remplacer les propriétés communes à plusieurs règles, d'appliquer des transformations et de gérer des styles complexes sans les déclarer directement.

Malheureusement, LESS ne dispose pas d'une telle fonctionnalité, mais il propose des solutions de contournement en utilisant diverses combinaisons de mélange paramétrique. -ins, injection de variables (fonction e()) et syntaxe de correspondance de modèles (@{ }).

Option 1 : Utiliser la fonction e() pour injecter des noms de propriété

Cette méthode consiste à injecter les noms de propriétés créés dynamiquement dans la valeur d'une autre propriété. Bien que disgracieux, il fait le travail.

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

Option 2 : Injecter des propriétés dans les noms de classe suivants (Moins v1.3.3)

Cette méthode implique de définir un fournisseur mélanger, puis construire une classe/un ensemble de règles virtuel qui inclut les propriétés du fournisseur. La classe suivante est ensuite construite en utilisant la syntaxe ~ pour lier les deux blocs fournisseur ensemble.

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

Option 3 : injection de propriétés à l'aide de la récursion (moins v1.4.0)

Cette méthode résout les limitations de la précédente lors de l'utilisation de less v1.4, en introduisant la récursivité pour construire des blocs fournisseur et les injecter dans une variable finale.

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

Ces solutions de contournement fournissent un moyen de créer une propriété dynamique noms en LESS, même si ce n'est pas aussi élégant que d'utiliser les fonctionnalités intégrées d'autres frameworks. Avec la sortie de LESS 1.6, l'interpolation dynamique des noms de propriétés a été implémentée, rendant ce processus beaucoup plus simple. La syntaxe est similaire à l'option 2, utilisant @{ } pour les noms de propriété.

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!