SASS 믹스가 예상 결과를 생성하지 않습니다.

Question

저는 처음으로 SASS를 프로젝트에 사용하고 있습니다. 결코 평범한 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; } 

문제를 :

첫째, (CSS 출력 포함) SCSS 아래 있었다. 나는 믹스 인으로 위를 리팩토링하고 싶어하지만, :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 속성을 자신의 믹스 인으로 나눌 수 있지만,이 프로젝트를 가능한 한 건조한 상태로 유지하려고 노력하면서 이걸 하나 하나 얻고 싶습니다.

감사합니다.

편집

유지 mixin : 나를 위해

@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 
} 

Answer 1

작품 미세 : http://sassmeister.com/gist/5458986 그래서 그것은 당신의 코드 구조에 문제가 있어야합니다.

신고하기 전에 믹스 인을 부르고 있습니다. 믹스 인을 이전에 정의하고 재정의하려는 경우가 아니면 오류가 발생했습니다. 원래 &:hover 부분이 없어도 정의 했습니까?

다시 발로 쏘지 않는지 다시 한번 확인하십시오.