在Sass中将变量设置为@mixin？

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

有没有办法设置@include mixin（）;变量？我试过这个

@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

3 个解决方案

#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：

@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.

这是SASS变量支持的数据类型列表。不包括mixin调用，也不包括它们的结果（整个CSS规则）。我也尝试将include作为字符串处理并插入它，但这只适用于最终结果CSS，而不是进一步的指令。

#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...

如果您尝试将返回值设置为SASS变量，则需要使用@function，而不是@mixin。这让我挂了一会儿，并没有意识到@function。例如...

@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.

顺便说一下，虽然这并没有解决用户正在寻找的问题，但这是关于互联网搜索中唯一一个关于将var设置为mixin的内容，所以我想在这里分享一下，让其他人知道该怎么做如果出现这种情况。

#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%)
}

#1