Adding !important using a Compass Mixin

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?

Solution 1:

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;

Solution 2:

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

Solution 3:

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!

Solution 4:

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

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