Wie können Sie dynamische Eigenschaftsnamen in LESS verwenden, wenn es keine integrierte Funktion für die dynamische Injektion gibt?

Verwendung dynamischer Eigenschaften und Eigenschaftsnameninterpolation in LESS

Einige Programmierframeworks wie CSS SASS unterstützen die dynamische Injektion von Eigenschaftsnamen mithilfe der @-Syntax. Damit können Sie die Namen und Werte von Eigenschaften in einen Selektor einfügen. Es ist eine großartige Möglichkeit, gemeinsame Eigenschaften über mehrere Regeln hinweg zu überschreiben, Transformationen anzuwenden und komplexe Stile zu verwalten, ohne sie direkt zu deklarieren.

Leider fehlt in LESS eine solche Funktion, es bietet jedoch einige Problemumgehungen durch verschiedene Kombinationen parametrischer Mischungen -ins, Variableninjektion (e()-Funktion) und Mustervergleichssyntax (@{ }).

Option 1: Verwenden der e()-Funktion zum Einfügen von Eigenschaftsnamen

Bei dieser Methode werden die dynamisch erstellten Eigenschaftsnamen in den Wert einer anderen Eigenschaft eingefügt. Obwohl es unangebracht ist, erfüllt es seinen Zweck.

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

Option 2: Eigenschaften in folgende Klassennamen einfügen (weniger v1.3.3)

Diese Methode beinhaltet die Definition eines Anbieters Einmischen und anschließendes Erstellen einer virtuellen Klasse/eines virtuellen Regelsatzes, der die Herstellereigenschaften enthält. Die nächste Klasse wird dann mithilfe der ~-Syntax erstellt, um die beiden Herstellerblöcke miteinander zu verbinden.

.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: Eigenschaften mittels Rekursion einfügen (Less v1.4.0)

Diese Methode behebt die Einschränkungen der vorherigen Methode bei Verwendung von less v1.4 und führt eine Rekursion ein, um Anbieterblöcke zu erstellen und sie in eine endgültige Variable einzufügen.

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

Diese Problemumgehungen bieten eine Möglichkeit, dynamische Eigenschaften zu erstellen Namen in LESS, obwohl es nicht so elegant ist wie die Verwendung der integrierten Funktionen anderer Frameworks. Mit der Veröffentlichung von LESS 1.6 wurde die dynamische Interpolation von Eigenschaftsnamen implementiert, was diesen Prozess erheblich vereinfacht. Die Syntax ähnelt Option 2, wobei @{ } für Eigenschaftsnamen verwendet wird.

Das obige ist der detaillierte Inhalt vonWie können Sie dynamische Eigenschaftsnamen in LESS verwenden, wenn es keine integrierte Funktion für die dynamische Injektion gibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!