Понастоящем използвам рамка на компаса и всичко това е полезно CSS3 mixins. Бих искал да използвам border-radius(5px)
mixin и всички свойства, които идват от него, са маркирани с !important
в ПО-МАЛКО възможно е да се приложи !important
към всички имоти в mixin, като просто я посочите след обаждане
.myMixin(@x) {
border-radius: @x;
-moz-border-radius: @x;
}
.myClass {
.myMixin(5px) !important;
}
се компилира до
.myClass {
border-radius: 5px !important;
-moz-border-radius: 5px !important;
}
Възможно ли е това да е в SASS, или ще трябва да пренапиша миксините с важен параметър?
@mixin my-border-radius($value, $important: false) {
border-radius: @value if($important, !important, null);
....
}
Отговори:
26 за отговор № 1Отговорът е твърде очевиден ...
!important
може просто да бъде посочен като част от стойността на имота
border-radius(5px !important);
4 за отговор № 2
Отговорът на Cander работи за прости променливи, които не са последвани от никакви други атрибути.
Преход в @mixin ($ duration, $ content:нула) { -webkit-transition: всички $ линейни $ съдържание; -moz-transition: всички $ линейни $ съдържание; -о-преход: всички $ линейни $ съдържание; преход: всички $ линейни $ съдържания; }
Аз добавих $content
променлива и я настройте като null
, Сега можете да се обадите на миксина с:
@include transition(0.3s);
и ако искате да добавите !important
, употреба
@include transition(0.3s, !important);
Благодаря!
1 за отговор № 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);
Резултат:
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%); }
Той работи и с два (и повече) променливи миксина!