Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding !important using a Compass Mixin

Tags:

compass-sass

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?

like image 549
David Avatar asked Aug 19 '11 01:08

David


People also ask

How do you add important to sass?

@include block(blue,15px,bold);

What is mixin and how do you use it?

The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.

How do you pass arguments to mixin?

Variable argument is used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin. Keyword arguments passed to the mixin can be accessed using keywords($args) function which return values mapped to String.

What is Compass and sass?

Compass is essentially a SASS library. It uses the raw language of sass and creates common reusable functions. From the website: Compass uses Sass. Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more.


2 Answers

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; 
like image 87
naoufal Avatar answered Oct 13 '22 21:10

naoufal


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 
like image 33
tothemario Avatar answered Oct 13 '22 23:10

tothemario