Pass style attribute to less mixin

Question

Is it possible to pass a generic string to a mixin in less? I am used to passing values like:

.border-radius (@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;  
    border-radius: @radius;
}

However I now find I want to do something like this:

.makeRed (@style) {
    @style: red;
}
.makeRed('border-color');

I have tried the above but it does not work, it doesn't throw a compile error it just doesnt compile anything.

Ideas?

Yes, you can. Use `@{style}: red;` instead of `@style: red;` and don't use quotes in the mixin call. *Note:* The mixin with parameters must be called from within a selector block to produce output, so it should be called like `#id { .makeRed(border-color);}` or something like it. — Harry, Sep 25 '14 at 10:22
great, that works! if u make that an actual answer ill accept it! thanks — Mike Oram, Sep 25 '14 at 10:23
I actually think this is a duplicate question mate, but right now unable to trace the original question. So, will add an answer for now and see if I can trace the old one. — Harry, Sep 25 '14 at 10:33

score 3 · Accepted Answer · answered Sep 25 '14 at 10:34

Yes, you can pass property names to a mixin and assign values to it using property name interpolation in Less.

The mixin value should be referenced like a string within curly braces (@{style}). Also, the mixin call should be made from within a selector block because otherwise parameteric mixins would not produce any output when compiled.

.makeRed (@style) {
    @{style}: red; // using the parameter
}

#id{ // selector block
    .makeRed(border-color); // mixin call with no quotes
}

Note: This method will work only from Less v1.6.0 and above.

Pass style attribute to less mixin

1 Answers1