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

时间:2014-07-31 16:48:32

标签: sass mixins

我创建了一个名为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);

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

2 个答案:

答案 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)。

这里的关键是:

  • 请注意您在哪里定义了mixin。
  • 确保mixin定义之前您的预期用途。
  • 如果您的定义与您的使用位于不同的文件中(我猜是这样,我怀疑您没有在_settings.scss中定义它)请确保导入该文件与导入_settings.scss
  • 之前的mixin定义

然后你就像在你的例子中一样使用它:

.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