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); .... }
@include block(blue,15px,bold);
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.
@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.
@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.
The answer is almost too obvious...
!important
can simply be specified as part of the property value
border-radius(5px !important);
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!
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