2

我第一次将 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 的限制？我可以将:activeand: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
}
4

1 回答 1

2

对我来说很好： http: //sassmeister.com/gist/5458986所以它一定是你的代码结构有问题。

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

请仔细检查您没有在自己的脚上开枪。

于 2013-04-25T11:08:02.033 回答