Question

我创建了一个名为my-gradient ...

的mixin

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

......但是有效的东西??

Answer 1

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...);
}

Answer 2

$body-bg: my-gradient(#fff, #eee);

...你没有包含混音，你试图使用不存在的函数（因为你已经定义了mixin，而不是function）。

这里的关键是：

请注意您在哪里定义了mixin。
确保mixin定义之前您的预期用途。
如果您的定义与您的使用位于不同的文件中（我猜是这样，我怀疑您没有在_settings.scss中定义它）请确保导入该文件与导入_settings.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%)); }

但是，正如另一条评论所述，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）

是否可以将mixin的结果存储在变量中？

2 个答案: