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 easy way to have compass add !important to every line it generates?

Answer 1

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

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 4

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 5

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