Est-ce que SASS prend en charge l'ajout! Important à toutes les propriétés d'un mixin? - sass, compas-sass

J'utilise actuellement le cadre compas et tout cela "s CSS3 mixins utiles. Je voudrais utiliser le border-radius(5px) mixin et ont toutes les propriétés qui en découlent marqué avec !important

Dans MOINS il est possible d'appliquer !important à toutes les propriétés d'un mixin en le spécifiant simplement après l'appel

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

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

compile pour

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

Est-ce possible dans TOUPET, ou devrai-je réécrire les mixins avec un paramètre important?

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

Réponses:

26 pour la réponse № 1

La réponse est presque trop évidente ...

!important peut simplement être spécifié dans la valeur de la propriété

border-radius(5px !important);

---

4 pour la réponse № 2

La réponse de Cander fonctionne pour des variables simples, qui ne sont suivies par aucun autre attribut. Vous pouvez le faire comme ceci, pour des CSS plus complexes, comme la propriété de transition

@mixin transition ($ duration, $ content:nul) { -webkit-transition: tout le contenu $ durée linéaire $; -moz-transition: tout le contenu $ durée linéaire $; -o-transition: tout le contenu $ durée linéaire $; transition: tout le contenu $ durée linéaire $; }

J'ai ajouté le $content variable et le définir comme null. Maintenant, vous pouvez appeler le mixin simple avec:

@include transition(0.3s);

et si vous voulez ajouter !important, utilisation

@include transition(0.3s, !important);

Merci!

---

1 pour la réponse № 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);

Résultat:

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

Cela fonctionne aussi avec un mixin à deux variables (et plus)!

---