How to use! Important keyword in mixin?

I can't get Sass to output the !important keyword with mixin, I tried:

 @include font-size($font-size-sml) !important; 

and

 @include font-size($font-size-sml !important); 

He always gives an error.

EDIT

I ended up with this, which works great:

 @mixin font-size($font-size, $sledge-hammer: "") { font-size: $font-size #{$sledge-hammer}; font-size: ($font-size / $base-font-size)+rem #{$sledge-hammer}; line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size); } 
+7
source share
1 answer

You cannot add !important to the whole mixin in SASS (maybe in LESS I think), as you are trying to do in the first example.

The second example works for me (you can pass important value with a parameter), I mean, if you use $font-size-sml directly as the value of the property, this works, so maybe check your syntax.

But if that really doesn't work for you, you can do something with the flag, set the important_flag parameter as the mixin parameter, and then use the if-else statement in mixin. Something like that:

 @mixin large-text($prop, $is_imp: false) { @if $is_imp == false { font-size: $prop; } @else { font-size: $prop !important; } } 

This may not be a glamorous way to do this, but it works; -)

+8
source

All Articles