Can you use a variable as the CSS Property and Value with LESS?

Question

With SASS I've been able to write code that uses interpolation to create a variable based mixin:

@mixin browserPrefix($property, $value) 
  -webkit-#{$property}: $value
  -moz-#{$property}: $value
  -ms-#{$property}: $value
  -o-#{$property}: $value
  #{$property}: $value

This is really flexible as I'm able to simply write @include browserPrefix($property: border-radius, $value: 3px) and get all of the browser prefixes when it compiles. This include allows for multiple different uses.

Is there a way to do this with LESS? I've tried using @{property} as the replacement, but it doesn't seem to work. Any suggestions please let me know, pretty new to LESS.

Blindly adding prefixes to your properties unnecessarily adds bloat to your CSS. Opera (Presto) and IE have very few properties that require prefixes at all. — cimmanon, Oct 28 '13 at 12:36
@cimmanon I totally agree with you ... one should always think what the CSS output needs to look like and not add unnecessary vendor prefixes and only add them where necessary ... but besides the unfortunate example with vendor prefixes - property interpolation can come sometimes quite handy. — Martin Turjak, Oct 29 '13 at 00:05

score 3 · Accepted Answer · edited May 23 '17 at 12:23

Simple answer is not yet.

But seems like it might be soon (in the next LESS release perhaps). See this thread https://github.com/less/less.js/issues/36 and it seems like @seven-phases-max is working on it at the moment (see here)

So only a tiny bit more patience =)

Here I posted a possible workaround a while ago:

Using variables in property names in LESS (dynamic properties / property name interpolation) (a bit hacky but it works, while waiting for the official release of property interpolation in LESS)

Update:

As of LESS 1.6 (changelog) property name interpolation is possible.
Your mixin would look like this in LESS:

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

Thanks! Look forward to trying out these workarounds. – dvoutt Oct 27 '13 at 23:41 — dvoutt, Oct 27 '13 at 23:41

Can you use a variable as the CSS Property and Value with LESS?

1 Answers1

Update: