CODEWITHSUNDEEP
sasscompass-sass
cander
cander

Reputation: 852

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

Upvotes: 27

Views: 46626

Answers (3)

Mario Wilhelm
Mario Wilhelm

Reputation: 368

Mixin:

@mixin verlauf($color1, $color2) {
  background: $color1;
  background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
  background: -webkit-linear-gradient(top, $color1 0%,$color2 100%);
  background: linear-gradient(to bottom, $color1 0%,$color2 100%);
}

SCSS:

 @include verlauf(#607a8b !important, #4b6272 !important);

Result:

background: #607a8b !important;
background: -moz-linear-gradient(top, #607a8b !important 0%, #4b6272 !important 100%);
background: -webkit-linear-gradient(top, #607a8b !important 0%, #4b6272 !important 100%);
background: linear-gradient(to bottom, #607a8b !important 0%, #4b6272 !important 100%); }

It works also with a two (and more) variable mixin!

Upvotes: 4

Madalin
Madalin

Reputation: 131

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!

Upvotes: 10

cander
cander

Reputation: 852

The answer is almost too obvious...

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

border-radius(5px !important);

Upvotes: 37

Related Questions