CSS 在 Sass 中将变量设置为 @mixin？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10023136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting variable to @mixin in Sass?
提问by FoxKllD
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
回答by Rick
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，不适用于其他指令。
回答by Bruce Smith
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 的内容，所以我想在这里分享这个让其他人知道该怎么做如果出现这种情况。
回答by Alejandro Oropeza Perez
@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%)
}
