Question

我尝试用mixins学习scss列表。

我写了一个简单的mixin，它为列表中的变量添加了一个background-url。

它是用 _mixins.scss 文件写的：

 $path: "../images/";

 @mixin dynamic-bg($path, $type, $ext) {
   @each $source in $source-list {
     &[data-bg="#{$source}"] {
         background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
     }
   }
 }

我在另一个文件中调用它，并在之前“描述”列表内容：

 a {
    $source-list: "alpha", "beta", "gamma"

    @include dynamic-bg($path, "logo", "png");
 }

它应该导致这样的CSS：

 a[data-bg="alpha"] {
    background: url("../images/alpha_logo.png") no-repeat;
 }
 a[data-bg="beta"] {
    background: url("../images/beta_logo.png") no-repeat;
 }
 a[data-bg="gamma"] {
    background: url("../images/gamma_logo.png") no-repeat;
 }

但是我收到了这个错误： 未定义的变量：“$ source-list”

如果我在 _mixins.scss 中的mixin之前添加列表内容，它可以正常工作，但如果是这样，我不能仅仅通过修改列表的内容来重复使用它。

我错过了什么吗？

提前致谢，

AW

Answer 1

如果我在_mixins.scss中的mixin之前添加列表内容，它可以正常工作，但如果是这样，我只能通过修改列表的内容来反复使用它。

调用mixin时，列表超出范围，因为您在zorder部分中定义了它。要使列表对mixin可见，您必须在外部定义列表（不一定在mixin之前，但至少在调用mixin之前）。

a { ... }

汇编为：

$path: "../images/";

@mixin dynamic-bg($path, $type, $ext) {
 @each $source in $source-list {
   &[data-bg="#{$source}"] {
       background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
   }
 }
}

$source-list: "alpha", "beta", "gamma";

a {
  @include dynamic-bg($path, "logo", "png");
}

$source-list: "new1", "new2";

strong {
 @include dynamic-bg($path, "logo", "png");
}

如果您将列表放在a[data-bg="alpha"] { background: url("../images/alpha_logo.png") no-repeat; } a[data-bg="beta"] { background: url("../images/beta_logo.png") no-repeat; } a[data-bg="gamma"] { background: url("../images/gamma_logo.png") no-repeat; } strong[data-bg="new1"] { background: url("../images/new1_logo.png") no-repeat; } strong[data-bg="new2"] { background: url("../images/new2_logo.png") no-repeat; }内，原因是没有其他定义应该能够使用它，那么您最好选择其他（可选）mixin参数：

汇编为：

@mixin dynamic-bg($path, $type, $ext, $sources: $source-list) {
 @each $source in $sources {
   &[data-bg="#{$source}"] {
       background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
   }
 }
}

$source-list: "default-1", "default-2";

a {
  $source-list: "alpha", "beta", "gamma";
  @include dynamic-bg($path, "logo", "png", $source-list);
}

strong {
  @include dynamic-bg($path, "logo", "png");
}

或者就像下面的必需参数一样，没有额外的a[data-bg="alpha"] { background: url("../images/alpha_logo.png") no-repeat; } a[data-bg="beta"] { /* ... */ strong[data-bg="default-1"] { background: url("../images/default-1_logo.png") no-repeat; } strong[data-bg="default-2"] { /* ... */变量：

$source-list

SCSS：Mixin＆amp;多个列表问题

1 个答案: