Deprecated. LESS supports property interpolation since version 1.6.0.

Mixin that adds some variable property support to LESS.

Include this stylesheet to your project:

@importurl('properties.less');

Now you can use variable properties:

@property: border-radius; .class-1{.property(@property, 10px)} .class-2{.property(@property, ~'10px 20px')}

Which will output in:

.class-1{-less-property: property; border-radius:10px} .class-2{-less-property: property; border-radius:10px20px}

You can also mass create properties with prefixes:

.class{.property(border-radius, 10px, 'mozwebkito')}

Which will output in:

.class{-less-property: property; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px}

If you want to generate only prefixed properties, pass false as a fourth argument:

.class{.property(border-radius, 10px, 'mozwebkito', false)}

Which will output in:

.class{-less-property: property; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px}

The -less-property: property junk line of code is a necessary sacrifice due to the hack nature of this mixin. However, all browsers should normally skip this line so it's just a matter of purity of code.

The mixin properly works with values that have spaces in them (e. g. 1px solid red) only when those are passed as an escaped string (e. g. ~'1px solid red').

Licensed under WTFPL. See http://sam.zoy.org/wtfpl/COPYING for more details.