19

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

3 回答 3

26

我不知道有什么特别的方法可以做到这一点，但如果你只是想在那种特定类型的渐变上干燥你的设置，你可以为它写一个包装混合：

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

编辑：

这是 SASS 变量支持的数据类型列表。既不包括 mixin 调用，也不包括它们的结果（整个 CSS 规则）。我还尝试将 include 视为字符串并对其进行插值，但这仅适用于最终结果 CSS，不适用于进一步的指令。

于 2012-04-05T05:46:26.690 回答
9

如果您尝试将返回值设置为 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 的内容，所以我想在这里分享这个让其他人知道该怎么做如果出现这种情况。

于 2015-02-11T16:03:51.327 回答
4 
@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%)
}
于 2012-07-17T21:44:20.230 回答