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

Posted 2023-03-06

【中文标题】在Sass中将变量设置为@mixin？

【英文标题】：Setting variable to @mixin in Sass?

【发布时间】：2012-04-18 20:53:21

【问题描述】：

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

【参考方案1】：

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

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

body  @include navBg; 

编辑：

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

【讨论】：

感谢您的解决方案和更多信息！我真的很感激

【参考方案2】：

@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%)

【参考方案3】：

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

【讨论】：

这对 OP 的用例没有帮助，因为他们不期望单个返回值。

为什么要创建一个带有硬编码值的function？有点失败是吧？