Поддерживает ли SASS добавление! Важно для всех свойств в mixin?

В настоящее время я использую инфраструктуру компаса и все полезные CSS3-миксы. Я хотел бы использовать mixin border-radius(5px) и иметь все свойства, которые появляются от него, отмеченные !important

В LESS можно применить !important ко всем свойствам в mixin, просто указав его после вызова

.myMixin(@x) {
    border-radius: @x;
    -moz-border-radius: @x;
}

.myClass {
  .myMixin(5px) !important;
}

компилируется в

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

Возможно ли это в SASS, или мне придется переписать mixins с важным параметром?

@mixin my-border-radius($value, $important: false) {
    border-radius: @value if($important, !important, null);
    ....
}

Ответы

Ответ 1

Ответ почти слишком очевиден...

!important можно просто указать как часть значения свойства

border-radius(5px !important);

Ответ 2

Cander отвечает за простые переменные, за которыми не следует какой-либо другой атрибут. Вы можете сделать это так, для более сложного CSS, как свойство перехода:

    @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;
    }

Я добавил переменную $content и установил ее как null. Теперь вы можете просто вызвать mixin с помощью:

@include transition(0.3s);

и если вы хотите добавить !important, используйте

@include transition(0.3s, !important);

Спасибо!

Ответ 3

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

Результат:

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

Он также работает с двумя (и более) переменными mixin!