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
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.
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.
@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%)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With