How can I achieve dynamic property names in LESS to apply cross-browser vendor prefixes?

Variables in Property Names in LESS

CSS pre-processors like LESS allow you to generate CSS dynamically based on variables and logic. One common task is to create CSS rules that apply cross-browser vendor prefixes to CSS properties.

LESS Dynamic Property Names

LESS currently does not offer direct support for dynamic property names. However, you can use workarounds to achieve similar functionality.

Workaround 1: Using e() and @{ }

In LESS versions below 1.6, you can use e() and @{ } to dynamically inject property names:

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

Workaround 2: Injecting Properties into the Next Class

You can also inject properties into the name of the next class using recursion:

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

Property Name Interpolation in LESS 1.6

As of LESS version 1.6, property name interpolation is directly implemented:

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

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

The above is the detailed content of How can I achieve dynamic property names in LESS to apply cross-browser vendor prefixes?. For more information, please follow other related articles on the PHP Chinese website!