Search code examples
sasscompass-sass

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


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

Solution

  • The answer is almost too obvious...

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

    border-radius(5px !important);