Wie kann ich dynamische Eigenschaftsnamen in LESS erreichen, um browserübergreifende Herstellerpräfixe anzuwenden?

Variablen in Eigenschaftsnamen in LESS

CSS-Präprozessoren wie LESS ermöglichen Ihnen die dynamische Generierung von CSS basierend auf Variablen und Logik. Eine häufige Aufgabe besteht darin, CSS-Regeln zu erstellen, die browserübergreifende Herstellerpräfixe auf CSS-Eigenschaften anwenden.

LESS Dynamic Property Names

LESS bietet derzeit keine direkte Unterstützung für dynamische Eigenschaftsnamen. Sie können jedoch Problemumgehungen verwenden, um eine ähnliche Funktionalität zu erreichen.

Problemumgehung 1: Verwendung von e() und @{ }

In LESS-Versionen unter 1.6 können Sie e() und @{ } verwenden. um Eigenschaftsnamen dynamisch einzufügen:

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

Problemumgehung 2: Eigenschaften in die nächste Klasse einfügen

Sie können Eigenschaften auch mithilfe der Rekursion in den Namen der nächsten Klasse einfügen:

.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 von Eigenschaftsnamen in LESS 1.6

Ab LESS Version 1.6 ist die Interpolation von Eigenschaftsnamen direkt implementiert:

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

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

Das obige ist der detaillierte Inhalt vonWie kann ich dynamische Eigenschaftsnamen in LESS erreichen, um browserübergreifende Herstellerpräfixe anzuwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!