Setting variable to @mixin in Sass?

FoxKllD picture FoxKllD · Apr 5, 2012 · Viewed 26.4k times · Source

Is there way to set @include mixin(); to variable? I tried this

@mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){
    background: $fallback;
    background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:    -moz-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:         #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
}

$navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
body { $navBg; } // it gave me an error

Answer

Rick picture Rick · Apr 5, 2012

I'm not aware of any way to do that specifically, but if you're trying to just dry your settings on that particular type of gradient, you could write a wrapper mixin for it:

@mixin navBg() {
    @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
}
body { @include navBg; }

Edit:

Here's a list of data types supported by SASS variables. Neither mixin calls, nor the result of them (entire CSS rules), are included. I also tried treating the include as a string and interpolating it, but that only works for end-result CSS, not further directives.