Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does SASS support adding !important to all properties in a mixin?

Tags:

I am currently using the compass framework and all it's helpful CSS3 mixins. I would like to use the border-radius(5px) mixin and have all properties that come from it marked with !important

In LESS it is possible to apply !important to all properties in a mixin by simply specifying it after call

.myMixin(@x) {     border-radius: @x;     -moz-border-radius: @x; }  .myClass {   .myMixin(5px) !important; } 

compiles to

.myClass {     border-radius: 5px !important;     -moz-border-radius: 5px !important; } 

Is this possible in SASS, or will I have to rewrite the mixins with an important parameter?

@mixin my-border-radius($value, $important: false) {     border-radius: @value if($important, !important, null);     .... } 
like image 341
cander Avatar asked Nov 29 '13 15:11

cander


People also ask

How do you add important to sass?

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

What is the purpose of using mixin in sass?

Sass Mixins 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.

What is difference between mixin and function sass?

@mixin, very similar to a function but the main difference between the two is that mixins output lines of Sass code that will compile directly into CSS styles, while functions return a value that can then become the value for a CSS property or become something that might be passed to another function or mixin.

What is the difference between mixin and extend in sass?

@mixin is used to group css code that has to be reused a no of times. Whereas the @extend is used in SASS to inherit(share) the properties from another css selector. @extend is most useful when the elements are almost same or identical. The main difference between the two is in their compiled CSS file.


2 Answers

The answer is almost too obvious...

!important can simply be specified as part of the property value

border-radius(5px !important); 
like image 182
cander Avatar answered Jan 01 '23 20:01

cander


Cander's answer works for simple variables, which aren`t followed by any other attribute. You could do it like so, for more complex CSS, like the transition property:

      @mixin transition($duration, $content:null) {         -webkit-transition:all $duration linear $content;         -moz-transition:all $duration linear $content;         -o-transition:all $duration linear $content;         transition:all $duration linear $content;     }  

I added the $content variable and set it as null. Now you can call the mixin simple with:

@include transition(0.3s);

and if you want to add !important, use

@include transition(0.3s, !important);

Thanks!

like image 40
Madalin Avatar answered Jan 01 '23 21:01

Madalin