Search code examples
sassmixins

Using SASS Function on an existing Mixin?

I have an existing mixin which creates a background gradient:

@include bg_gradient($dark:#292446, $light:#3e395b, $highlight:#65617d);

I want to have a hover lighten it , I cannot seem to figure out how to hand that off to the function:

lighten(@include bg_gradient($dark:#292446, $light:#3e395b, $highlight:#65617d), 10%);

does not work , I have also tried rolling into into the end as you can do with other CSS attrs:

@include bg_gradient($dark:#292446, $light:#3e395b, $highlight:#65617d, lighten ($dark, 10%));

Also, tried assigning the mixin to a variable and passing it in as such:

lighten($gradient-value, 10%);
Solution

  • Mixins don't return a value, so you can't use functions on them. In your 2nd example, what you need is to be able to pass the function itself as an argument, which isn't currently possible. Your only option is this (assuming you wanted to apply the function to all 3 arguments):

    @include bg_gradient($dark: lighten(#292446, 10%), $light: lighten(#3e395b, 10%), $highlight: lighten(#65617d, 10%));