Adding !important using a Compass Mixin

Question

If I\'m using compass for CSS and use a function or mixin like:

   @include background-image(linear-gradient(#a3cce0, #fff)); 

is there any

Answer 1

I had this problem last time and I overrided the compass style with a stronger selector. I just added an ID on my html element

span { @include border-radius(5px);}

span#no-radius { @include border-radius(0px); } // override

Answer 2

You can include it inside the mixin like so:

@include border-radius(5px !important);

Compass will output the following:

-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;

Answer 3

UPDATE: new versions of sass support this syntax now:

@include border-radius(5px !important);

Just do this (as noted in @naoufal answer).

--- old answer ---

You can not use !important with compass mixings, but the culprit is not compass, you should blame sass for this.

@include border-radius(5px) !important; #=> SASS Syntax Error

Answer 4

Actually you can use a @function to handle the !important while keeping the flexibility of the mixing itself. For example:

@function is-important($important){
  @return #{if($important, '!important', '')};
}

// by default we don't want the !important at the end
@mixin button-primary($important: false) {
  font-size: 14px;
  background: #fff is-important($important);
  color: #000 is-important($important);
}

Hope it helps!

Answer 5

This question came up in my search for a similar problem, it's spot on but I just wanted to add that Making a Sass mixin with optional arguments was another possible approach that I found useful.

Replace inset with important and pass !important in when you need it.

Answer 6

Just spent hours figuring this out but there is a quick trick you can do. At the top of your SASS file add the following:

$i: unquote("!important");

in your style do the following:

color: #CCCCCC $i;

output is:

color: #CCCCCC !important;

full sample:

$i: unquote("!important");

.some-style {
    color: white $i;
}

output:

.some-style {
    color: white !important;
}