Sass/LESS Mixin variables

[codytooker]

I would like to suggest to you to add more variables to the sass version.

Currently this is the sweep-to-top mixin (similar to all the other background mixins)

@mixin sweep-to-top {
    @include hacks();
    position: relative;
    @include prefixed(transition-property, color);
    @include prefixed(transition-duration, $mediumDuration);

    &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: $activeColor;
        @include prefixed(transform, scaleY(0));
        @include prefixed(transform-origin, 50% 100%);
        @include prefixed(transition-property, transform);
        @include prefixed(transition-duration, $mediumDuration);
        @include prefixed(transition-timing-function, ease-out);
    }

    &:hover,
    &:focus,
    &:active {
        color: white;

        &:before {
            @include prefixed(transform, scaleY(1));
        }
    }
}

I would like to suggest something like the following

@mixin sweep-to-top($background-hover: $activeColor) {
    @include hacks();
    position: relative;
    @include prefixed(transition-property, color);
    @include prefixed(transition-duration, $mediumDuration);

    &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: $background-hover;
        @include prefixed(transform, scaleY(0));
        @include prefixed(transform-origin, 50% 100%);
        @include prefixed(transition-property, transform);
        @include prefixed(transition-duration, $mediumDuration);
        @include prefixed(transition-timing-function, ease-out);
    }

    &:hover,
    &:focus,
    &:active {
        color: white;

        &:before {
            @include prefixed(transform, scaleY(1));
        }
    }
}

The reason to make this useful is we can now easily do something like the following

.btn-primary {
   @include sweep-to-top($brand-secondary)
}
.btn-secondary {
   @include sweep-to-top($brand-primary)
}

We can go even further and do something like the following

@mixin sweep-to-top($background-hover: $activeColor, $active-color: #fff, $duration: $mediumDuration) 

[codytooker]

@IanLunn Is this something you would be interested in. I think it makes this library much easier to use. Basically now the background animations and others can only be used as one color combo or size (depending on what animation it is) without some kind of edits.

for the sweep-to-top example above. Let's say my site has two types of buttons. primary and secondary. I want to use this same animation on each button but I want the hover states to be different colors. Currently I can't easily do that without making some kind of edit like I have mentioned above.

If this is something you would be interested in adding to the Sass version I would be more than happy to submit a pull requests.

[IanLunn]

I'm considering doing this in a future version. See duplicate: https://github.com/IanLunn/Hover/issues/67