SASS supporta l'aggiunta di! Importante a tutte le proprietà in un mixin? - sass, compass-sass

Attualmente sto usando il quadro della bussola e tutti i suoi utili CSS3 mixin. Mi piacerebbe usare il border-radius(5px) mescolare e avere tutte le proprietà che ne derivano contrassegnate con !important

In DI MENO è possibile applicare !important a tutte le proprietà in un mixin specificando semplicemente dopo chiamata

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

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

compila a

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

È possibile in SASSo dovrò riscrivere i mix con un parametro importante?

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

risposte:

26 per risposta № 1

La risposta è quasi troppo ovvia ...

!important può semplicemente essere specificato come parte del valore della proprietà

border-radius(5px !important);

---

4 per risposta № 2

La risposta di Cander funziona con variabili semplici, che non sono seguite da nessun altro attributo, ma puoi farlo in questo modo, per CSS più complessi, come la proprietà di transizione:

Transizione @mixin ($ duration, $ content:nullo) { -webkit-transition: tutto $ duration $ $ contenuto; -moz-transition: tutto $ $ contenuto lineare $; -o-transizione: tutto $ $ contenuto lineare $; transizione: tutto $ $ contenuto lineare $; }

Ho aggiunto il $content variabile e impostalo come null. Ora puoi chiamare il mixin simple con:

@include transition(0.3s);

e se vuoi aggiungere !important, uso

@include transition(0.3s, !important);

Grazie!

---

1 per risposta № 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);

Risultato:

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

Funziona anche con un mixin due (e più)!

---