How can you use dynamic property names in LESS, given that it doesn't have a built-in feature for dynamic injection?

Using dynamic properties and property name interpolation in LESS

Some programming frameworks like CSS SASS supports dynamic injection of property names using the @ syntax, allowing you to inject the names and values of properties into a selector. It's a great way to override common properties across multiple rules, apply transforms, and manage complex styles without directly declaring them.

Unfortunately, LESS lacks such a feature, but it does offer some workarounds using various combinations of parametric mix-ins, variable injection (e() function) and pattern matching (@{ }) syntax.

Option 1: Using the e() Function to Inject Property Names

This method involves injecting the dynamically created property names into the value of another property. Though ungraceful, it does the job.

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

Option 2: Injecting Properties into Following Class Names (Less v1.3.3)

This method involves defining a vendor mix-in and then constructing a virtual class/ruleset that includes the vendor properties. The next class is then constructed using the ~ syntax to bind the two vendor blocks together.

.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: Injecting Properties using Recursion (Less v1.4.0 )

This method addresses the limitations of the previous one when using less v1.4 , introducing recursion to construct vendor blocks and inject them into a final variable.

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

These workarounds provide a way to create dynamic property names in LESS, although it's not as elegant as using the built-in features of other frameworks. With the release of LESS 1.6, dynamic property name interpolation has been implemented, making this process much simpler. The syntax is similar to Option 2, using @{ } for property names.

The above is the detailed content of How can you use dynamic property names in LESS, given that it doesn't have a built-in feature for dynamic injection?. For more information, please follow other related articles on the PHP Chinese website!