css - Is it possible to pass !important as parameter/option for LESSCSS mixins?

Question

This is what I already have:

.coloring(@color){
    color:@color;
}

---

But this is what I actually wanted to do:

.coloring(@color, @important:''){
    color:@color @important;
    //etc 
}

So I could call:

.coloring(@color, !important);

But I get the error message "ParseError: Unrecognised input"

---

Is there a way to tell this mixin optoinally to use "!important" for the CSS statements?

Answer 1

See The !important keyword. E.g. can just use .coloring(red) !important; w/o mixin changes. Or use escaping for the modified mixin since ! is not allowed symbol in mixin parameter values (i.e. .coloring(red, ~'!important');).

Also note that the default value of '' for the @important parameter is not correct since the mixin call with this parameter omitted will result in invalid color: color ''; CSS (use @important... or @important: ~'' if you need an "empty" default value ).

P.S. Also do not miss that you can supply both color and !important values as a single parameter, i.e. .coloring(red ~'!important'); would be also correct method to invoke your original 1-parameter mixin (if you need only color property to have the !important modifier contrary to .coloring(red) !important; syntax where !important applies to all CSS properties within the mixin).