2013-04-25 4 views
2

Я использую 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 
} 
+0

Можем ли мы увидеть код 'linear-gradient' и' text-shadow' mixins? – Pavlo

+0

вывести полный вывод, а не только '...' output. – sevenseacat

+0

@PavloMykhalov Mixins добавлено –

ответ

2

отлично работает для меня: http://sassmeister.com/gist/5458986 Так должно быть проблема с вашей структуры кода.

Я заметил, что вы вызываете миксин перед объявлением его. Это должно было вызвать ошибку, если у вас есть ранее установленный mixin, и вы пытаетесь переопределить его. Вы изначально определяли его без части &:hover?

Пожалуйста, проверьте, не стреляете ли вы в ногу.

+0

Ну, после утреннего утра, я вернулся к своему коду и обнаружил дубликат моего микширования «color-buttons» без присутствия свойства ': hover'. Я могу только представить, что я сделал это поздно ночью в разгар моего разочарования. Забавно, как глупые ошибки могут заставить меня чувствовать себя полным придурком ... В моем коде все микшины объявлены перед любыми правилами CSS; это была просто (другая) ошибка при вставке в вопрос. –