我创建了一个名为my-gradient
...
@mixin my-gradient($outerColor, $centerColor) {
background: $outerColor; /* Old browsers */
background: -moz-linear-gradient(left, $outerColor 0%, $centerColor 50%, $outerColor 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$outerColor), color-stop(50%,$centerColor), color-stop(100%,$outerColor)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, $outerColor 0%,$centerColor 50%,$outerColor 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, $outerColor 0%,$centerColor 50%,$outerColor 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, $outerColor 0%,$centerColor 50%,$outerColor 100%); /* IE10+ */
background: linear-gradient(to right, $outerColor 0%,$centerColor 50%,$outerColor 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$outerColor', endColorstr='$outerColor',GradientType=1 ); /* IE6-9 */
}
我可以在我的css声明中的 _structure.scss 文件中使用它 - 例如......
.top-bar-section li:not(.has-form) a:not(.button):hover {
@include my-gradient($topbar-bg-color, scale-color($topbar-bg-color, $lightness: 50%));
}
但是可以将其包含在我的 _settings.scss 文件中。有点像......
$body-bg: my-gradient(#fff, #eee);
......但是有效的东西??
答案 0 :(得分:3)
Mixins和函数不是可互换的东西。 Mixins不返回值,也不能将结果存储在变量中,只有函数可以这样做。
如果您只想将mixin的参数存储为可在其他地方重用的变量,那么在调用mixin时可以使用variable arguments(...
)语法:
$body-bg: #fff, #eee; // list of arguments in the exact order they should be sent to the mixin
.foo {
@include my-gradient($body-bg...);
}
答案 1 :(得分:1)
$body-bg: my-gradient(#fff, #eee);
...你没有包含混音,你试图使用不存在的函数(因为你已经定义了mixin,而不是function)。
这里的关键是:
然后你就像在你的例子中一样使用它:
.top-bar-section li:not(.has-form) a:not(.button):hover { @include my-gradient($topbar-bg-color, scale-color($topbar-bg-color, $lightness: 50%)); }
但是,正如另一条评论所述,mixins不会返回值,因此您无法将它们存储在变量中。
相反,您可以使用placeholder:
%my-placeholder-for-gradients {
@include my-gradient($topbar-bg-color, scale-color($topbar-bg-color, $lightness: 50%));
}
.some-real-selector {
@extend %my-placeholder-for-gradients;
}
这相当于一个变量,你可以@extend
占位符多次(编译的CSS中没有重复的代码,而不是重复使用@include
)