web-dev-qa-db-fra.com

SASS prend-il en charge l'ajout de! Important à toutes les propriétés d'un mixage?

J'utilise actuellement le framework de boussole et tous ses mixins CSS3 utiles. Je voudrais utiliser le mixage border-radius(5px) et avoir toutes les propriétés qui en découlent marquées par !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 en

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

Est-ce possible dans SASS , 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);
    ....
}
sasscompass-sass
19
cander

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

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

border-radius(5px !important);
29
cander

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

 
 @mixin transition ($ duration, $ content: null) {
 -webkit-transition: tout le contenu $ duration linear $; 
 -moz-transition: tout $ duration linear $ content; 
 -o-transition: tout $ duration linear $ content; 
 transition: tout $ duration linear $ content; 
}

J'ai ajouté la variable $content Et l'ai définie comme null. Vous pouvez maintenant appeler le mixin simple avec:

@include transition(0.3s);

et si vous voulez ajouter !important, utilisez

@include transition(0.3s, !important);

Merci!

8
Madalin

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

Il fonctionne également avec un mixin à deux variables (et plus)!

2
Mario Wilhelm