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?

Unfortunately, that's not possible with Compass. There is no direct fix for this, but you could copy the mixin internals and add `!important` somewhere yourself. It's not ideal, but there is no other option for it yet. — Luwe, Aug 22 '11 at 11:41

score 88 · Answer 1 · answered Jun 28 '13 at 15:54

88

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;

answered Jun 28 '13 at 15:54

naoufal

1,181
1
8
8

4

As !important works with Compass (at least it does now), this should really be the best answer. – Graeck Jul 16 '13 at 21:32
This works for me using (at present latest) version of compass 0.12.2 – dan richardson Jul 22 '13 at 12:41
This isn't really a great approach as you may not want to have the !important on every single call of the mixin. – Sep 25 '13 at 14:13
3

@OliverBenns If that were the case, you wouldn't benefit from using a mixin in the first place. – naoufal Oct 08 '13 at 13:35
2

This will not work when using mixins that change the values of the args. Like @opacity() for example. – badsyntax Jun 19 '14 at 08:01

tothemario · Accepted Answer · 2016-08-17T02:58:43.213

36

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

edited Aug 17 '16 at 02:58

answered Oct 26 '11 at 17:43

tothemario

5,851
3
44
39

4

Shouldn't it be `@include border-radius(5px !important);` which also does not work. The reason for this would be because the `5px` will show up as the value of each rule, so the !important needs to also show up next to the value of each rule. – ProLoser Jul 30 '12 at 22:35
13

@ProLoser I just tried `@include border-radius(5px !important);` and it works fine. Maybe they've fixed this since your comment though. Down-vote this answer (though it may have been right at the time). – Graeck Jul 16 '13 at 21:30

WSD · Answer 3 · 2020-12-07T09:55:05.950

10

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!

edited Dec 07 '20 at 09:55

answered Sep 15 '20 at 10:35

WSD

3,243
26
38

1

And so you can include like this : @include quiz-button-arrow(true); Thank you really much for this! – Rum Jeremy Dec 03 '20 at 18:45

score 7 · Answer 4 · edited Mar 05 '19 at 13:43

7

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

edited Mar 05 '19 at 13:43

Aamir Afridi

6,364
3
42
42

answered Apr 10 '17 at 21:08

John Angelini

71
1
2

Thanks! I used this idea in Koala preprocessor, I only had to use the variable this way: `... color: white #{$i}; ..." – Vit Kovalcik May 20 '21 at 15:08
Thanks so much for sharing this. Have been looking for this since whole day. – user10169731 Jan 06 '23 at 22:01

score 4 · Answer 5 · edited May 23 '17 at 12:34

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.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 25 '13 at 07:44

Shane Maiolo

171
4

You get the +1 for helping me get rid of the errors in my IDE (webstorm). It works without the quotes as mentioned by naoufal above, but I hate having the "errors" in my project. I'm gonna submit a bug report to JetBrains for this. – kahmali Oct 20 '14 at 09:33

score 3 · Answer 6 · edited Jul 03 '12 at 17:50

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

edited Jul 03 '12 at 17:50

Bo Persson

90,663
31
146
203

answered Jul 03 '12 at 17:39

Nice and elegant solution. – sawa Jan 21 '13 at 09:01
There shouldn't be an id called `no-radius`. This is more of an hackish solution. – Timo Ernst Nov 08 '19 at 15:34

Adding !important using a Compass Mixin

6 Answers6

Linked