How can I achieve dynamic property names in LESS to apply cross-browser vendor prefixes?-CSS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2024-11-07 13:18:03

Original

516 people have browsed it

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

Copy after login

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:&quot;&quot;) {
    @inject:~&quot;@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};&quot;;
}

.test(@nextclass){
    .vendors(transform, &quot;matrix(2,0,0,2,20,20)&quot;);
    .vendors(transform-origin,&quot;10px 10px&quot;, @inject);
    (~&quot;{@{inject}} .@{nextclass}&quot;) {/*next class properties*/};
}

.this-class{
    .test(next-class);
}

Copy after login

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

Copy after login

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!