Setting variable to @mixin in Sass?
Solution 1
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.
Solution 2
If you are trying to set a returned value to a SASS variable, you need to use @function, not @mixin. This hung me up for a little while and was not aware of @function. For example...
@function font($font-size, $line-height: 1.4, $font-family: Arial) {
@if $line-height == 1.4 {
$line-height: round($line-height*$font-size);
}
@return #{$font-size}/#{$line-height} $font-family;
}
$font-medium: font(20px);
BTW, although this doesn't address what this user is looking for exactly, this is about the only thing that pops up on an internet search about setting a var to a mixin so I wanted to share this here for others to know what to do if this situation pops up.
Solution 3
@mixin gradient ($place, $bcolor1, $bcolor2){`<br>`
background-image: linear-gradient($place, $bcolor1, $bcolor2)`<br>`
background-image: -o-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
background-image: -moz-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
background-image: -webkit-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
background-image: -ms-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
}
body{
@include gradient(bottom, #F90000 18%, #FF4C4C 66%)
}
Comments
-
FoxKllD almost 2 years
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