SASS Mixin not producing the expected result

Question

I'm using SASS for a project for the first time and I love it. I never want to write plain CSS ever again. I am however a little confused by the following scenario and hopefully I am missing something really obvious.

First, I had the below SCSS (CSS output included):

// 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; }

Now, the problem. I wanted to refactor the above into a mixin, but the :hover property isn't appearing in the CSS output:

// 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; }

Any ideas what the problem is, or if I am hitting a limitation in SASS? I could split the :active and :hover properties into their own mixins but I'd really like to get this into a single one as I'm trying to keep this project as DRY as possible.

Thanks!

EDIT

Mixins:

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

Can we see the code of linear-gradient and text-shadow mixins? — Pavlo
what's after the code you output? there's no reason why the &:active stuff shouldn't be output straight after. — sevenseacat

Andrey Mikhaylov - lolmaus Andrey Mikhaylov - lolmaus · Accepted Answer · 2013-04-25T11:08:02

Works fine for me: http://sassmeister.com/gist/5458986 So it must be a problem with your code structure.

I've noticed that you're calling a mixin prior to declaring it. This should've raised an error unless you have the mixin defined earlier and you're trying to redefine it. Did you originally define it without the &:hover part?

Please double check you're not shooting yourself in the foot.

SASS Mixin not producing the expected result

1 Answers