SASS Mixin没有产生预期的结果

Question

我第一次使用SASS进行项目，我喜欢它。我再也不想写简单的CSS了。然而，我对以下情况有点困惑，希望我错过了一些非常明显的东西。

首先，我有以下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属性拆分成它们自己的mixin，但是我真的很想将它融入到一个单独的属性中，因为我试图尽可能保持该项目为DRY。

谢谢！

编辑

混入：

我

@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所以它必须与你的代码结构的问题。

我注意到你在声明之前调用了mixin。这应该会引发一个错误，除非您之前定义了mixin，并且您正在尝试重新定义它。你最初是否在没有&:hover部分的情况下定义它？

请仔细检查你是不是在脚下拍摄自己。