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?
@include block(blue,15px,bold);
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.
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.
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.
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;
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With