CODEWITHSUNDEEP
csssass
sawa
sawa

Reputation: 168101

Adding `!important` to a mixin

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?

Upvotes: 7

Views: 8576

Answers (4)

Reuel Ribeiro
Reuel Ribeiro

Reputation: 1479

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);
}

Upvotes: 8

Andre Podbereźniak
Andre Podbereźniak

Reputation: 11

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

Upvotes: 0

Rajesh Omanakuttan
Rajesh Omanakuttan

Reputation: 6918

!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

):

Upvotes: 3

Tikkes
Tikkes

Reputation: 4689

You cannot use !important on a Mixin.

it will end up giving you a SASS syntax error.

See this question for more information

Upvotes: 1

Related Questions