O SASS suporta adicionar importante para todas as propriedades em um mixin? - sass, compass-sass

Atualmente estou usando o estrutura de bússola e tudo o que é útil CSS3 mixins. Eu gostaria de usar o border-radius(5px) mixin e tem todas as propriedades que vêm dele marcado com !important

Dentro MENOS é possível aplicar !important para todas as propriedades em um mixin simplesmente especificando após a chamada

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

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

compila para

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

Isso é possível em SASSou terei que reescrever os mixins com um parâmetro importante?

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

Respostas:

26 para resposta № 1

A resposta é quase óbvia demais ...

!important pode simplesmente ser especificado como parte do valor da propriedade

border-radius(5px !important);

---

4 para resposta № 2

Cander "s resposta funciona para variáveis ​​simples, que não são seguidas por qualquer outro atributo. Você poderia fazê-lo assim, para CSS mais complexo, como a propriedade de transição:

@mixin transition ($ duration, $ content:nulo) { -webkit-transition: todo $ $ linear $ content; -moz-transition: todo $ $ linear $ content; -o-transition: todo o $ linear $ content; transição: toda $ duração linear $ conteúdo; }

Eu adicionei o $content variável e configurá-lo como null. Agora você pode chamar o mixin simples com:

@include transition(0.3s);

e se você quiser adicionar !important, usar

@include transition(0.3s, !important);

Obrigado!

---

1 para resposta № 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);

Resultado:

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

Funciona também com duas (e mais) mixin variáveis!

---