Adding `!important` to a mixin - css

Question

I want to add !important to a mixin. I tried both the following ways, and they return an error:
#include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)); !important
#include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)) !important;
Is there a way to do this correctly?

Answer 1

For some situations, I use a optional parameter named $important which I can pass in true.
Example:
my-mixin($important: true);
It would look something like that, with a helper function to avoid repetition on the properties that I have to toggle important:
#function if-important($important){
#return #{if($important, '!important', '')};
}
#mixin my-mixin($important: false) {
border-radius: 0; //whatever
border: 1px solid #ccc if-important($important);
background-color: #fff if-important($important);
color: #000 if-important($important);
}

Answer 2

!important cannot be used in a mixin. Refer the following links.
Adding !important using a Compass Mixin
https://github.com/cloudhead/less.js/issues/547
):

Answer 3

You cannot use !important on a Mixin.
it will end up giving you a SASS syntax error.
See this question for more information

Answer 4

Try passing it as a parameter:
#mixin anim($params...){
$values: null;
#for $i from 0 to length($params) {
#debug #{nth($params, $i + 1)};
#if '#{nth($params, $i + 1)}' != '!important' {
$values: #{nth($params, $i + 1)} $animation__time $animation__easing, $values;
}
}
#if '#{nth($params, length($params))}' != '!important' {
transition: $values;
}
#else {
transition: $values !important;
}
}
Usage:
#include anim(background-color, color, !important);