Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

less

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?

like image 356
Simon Ferndriger Avatar asked Dec 07 '22 02:12

Simon Ferndriger


1 Answers

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).

like image 182
seven-phases-max Avatar answered Jun 08 '23 07:06

seven-phases-max