Я использую SASS для проекта в первый раз, и мне это нравится. Я никогда не хочу писать простой CSS снова. Однако я немного смущен следующим сценарием, и, надеюсь, у меня пропало что-то действительно очевидное.SASS Mixin не дает ожидаемого результата
Во-первых, у меня был ниже SCSS (выход CSS включен):
// SCSS
.pos-button {
@include linear-gradient($color-secondary-green, !important);
@include text-shadow(lighten($color-secondary-green, 10%), !important);
&:active {
box-shadow:inset 0 0 5px 2px darken($color-secondary-green, 20%) !important;
}
&:hover {
@include linear-gradient(darken($color-secondary-green, 10%), !important);
@include text-shadow($color-secondary-green);
}
}
// CSS OUTPUT
.pos-button {
background: #99c965 !important;
background: -moz-linear-gradient(#99c965, #669434) !important;
background: -webkit-linear-gradient(#99c965, #669434) !important;
background: -o-linear-gradient(#99c965, #669434) !important;
background: -ms-linear-gradient(#99c965, #669434) !important;
background: linear-gradient(#99c965, #669434) !important;
text-shadow: 0 1px #99c965 !important; }
.pos-button:active {
box-shadow: inset 0 0 5px 2px #4c6e27 !important; }
.pos-button:hover {
background: #80ba41 !important;
background: -moz-linear-gradient(#80ba41, #4c6e27) !important;
background: -webkit-linear-gradient(#80ba41, #4c6e27) !important;
background: -o-linear-gradient(#80ba41, #4c6e27) !important;
background: -ms-linear-gradient(#80ba41, #4c6e27) !important;
background: linear-gradient(#80ba41, #4c6e27) !important;
text-shadow: 0 1px #80ba41; }
Теперь проблему. Я хотел, чтобы реорганизовать выше в Mixin, но :hover
свойство не появляется в выводе CSS:
// SCSS
.pos-button {
@include color-buttons($color-secondary-green);
}
@mixin color-buttons($color) {
@include linear-gradient($color, !important);
@include text-shadow(lighten($color, 10%), !important);
&:active {
box-shadow:inset 0 0 5px 2px darken($color, 20%) !important;
}
&:hover {
@include linear-gradient(darken($color, 10%), !important);
@include text-shadow($color);
}
}
// CSS OUTPUT
.pos-button {
background: #99c965 !important;
background: -moz-linear-gradient(#99c965, #669434) !important;
background: -webkit-linear-gradient(#99c965, #669434) !important;
background: -o-linear-gradient(#99c965, #669434) !important;
background: -ms-linear-gradient(#99c965, #669434) !important;
background: linear-gradient(#99c965, #669434) !important;
text-shadow: 0 1px #99c965 !important; }
.pos-button:active {
box-shadow: inset 0 0 5px 2px #4c6e27 !important; }
Любые идеи, что проблема есть, или если я поражая ограничение в SASS? Я мог бы разделить объекты :active
и :hover
на свои собственные микшины, но я бы очень хотел, чтобы это было в одном, поскольку я пытаюсь сохранить этот проект как сухим, насколько это возможно.
Спасибо!
EDIT
Примеси:
@mixin text-shadow($color, $important : null) {
text-shadow:0 1px $color $important;
}
@mixin linear-gradient($color, $important : null) {
$from:lighten($color, 10%);
$to:darken($color, 10%);
background: $from $important; // Old browsers
background: -moz-linear-gradient($from, $to) $important; // FF3.6+
background: -webkit-linear-gradient($from, $to) $important; // Chrome10+,Safari5.1+
background: -o-linear-gradient($from, $to) $important; // Opera 11.10+
background: -ms-linear-gradient($from, $to) $important; // IE10+
background: linear-gradient($from, $to) $important; // W3C
}
Можем ли мы увидеть код 'linear-gradient' и' text-shadow' mixins? – Pavlo
вывести полный вывод, а не только '...' output. – sevenseacat
@PavloMykhalov Mixins добавлено –