Unterstützt SASS das Hinzufügen von! Wichtig zu allen Eigenschaften in einem Mixin? - Sass, Kompass-Sass

Ich benutze derzeit die Kompass-Rahmen und all das sind hilfreiche CSS3 - Mixins. Ich würde gerne das verwenden border-radius(5px) mixin und haben alle Eigenschaften, die daraus hervorgehen, mit gekennzeichnet !important

Im WENIGER es ist möglich sich zu bewerben !important zu allen Eigenschaften in einem Mixin, indem Sie es einfach nach dem Aufruf angeben

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

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

kompiliert zu

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

Ist das möglich? SASS, oder muss ich die mixins mit einem wichtigen parameter umschreiben?

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

Antworten:

26 für die Antwort № 1

Die Antwort ist fast zu offensichtlich ...

!important kann einfach als Teil des Eigenschaftswerts angegeben werden

border-radius(5px !important);

---

4 für die Antwort № 2

Die Antwort von Cander funktioniert für einfache Variablen, denen kein anderes Attribut folgt. Bei komplexerem CSS könnte dies wie folgt aussehen:

@mixin Transition ($ duration, $ content:Null) { -webkit-Transition: alle $ duration linear $ Inhalte; -moz-Transition: alle $ duration linear $ Inhalte; -o-Transition: alle $ duration linear $ Inhalte; Übergang: alle $ duration linear $ Inhalte; }

Ich habe das hinzugefügt $content variabel und setze es als null. Jetzt können Sie das Mixin einfach aufrufen mit:

@include transition(0.3s);

und wenn du hinzufügen willst !important, benutzen

@include transition(0.3s, !important);

Vielen Dank!

---

1 für die Antwort № 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);

Ergebnis:

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

Es funktioniert auch mit zwei (und mehr) variablen Mixins!

---