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

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

Susan Sarandon

Release： 2024-11-07 08:30:03

Original

1150 people have browsed it

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

Copy after login

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:&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

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: `&quot;\n\t&quot;`; 
 
.multi(@props,@vals,@i,@inj) {
    @property: extract(@props, 1);
    @value: extract(@vals, 1);
    @inject:~&quot;@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};&quot;;
}
 
.multi(@props,@vals,@i,@inj:&quot;&quot;) when (@i > 0) {
    @property: extract(@props, @i);
    @value: extract(@vals, @i);
    @injnext:~&quot;@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};&quot;;
    .multi(@props,@vals,(@i - 1),@injnext);
}
 
@properties: &quot;transform-origin&quot; &quot;transform&quot;;
@values: &quot;10px 10px&quot; &quot;matrix(2,0,0,2,20,20)&quot;;
 
@p: ~&quot;@{nl}width:20px; @{nl}height:12px; @{nl}background-color:#000;&quot;;
 
.this-class {
    .multi(@properties,@values,2,@p);
    @inj: ~&quot;{@{inject}`'\n'`} `'\n'`.next-class &quot;;
    @{inj} {/**/}
}

Copy after login

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!