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

Question

有没有办法设置@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

Answer 1

我不知道有什么方法可以做到这一点,但是如果你试图在特定类型的渐变上干燥你的设置,你可以为它写一个包装mixin:

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

编辑:

以下是SASS变量支持的数据类型列表.不包括mixin调用,也不包括它们的结果(整个CSS规则).我还尝试将include作为字符串处理并对其进行插值,但这仅适用于最终结果CSS,而不适用于其他指令.

Answer 2

如果您尝试将返回值设置为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);

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