List SCSS：混合和多列表问题

我试着用mixin学习scss列表

我编写了一个简单的mixin，其中添加了一个关于列表中变量的背景url

它写在一个_mixins.scss文件中：

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

 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

如果我将列表内容添加到mixin in_mixins.scss之前，效果会很好，但如果是这样，我就不能通过修改列表内容来反复使用它

我错过什么了吗

提前感谢,

啊

如果我将列表内容添加到mixin in_mixins.scss之前，效果会很好，但如果是这样，我就不能通过修改列表内容来反复使用它

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

$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;
}

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"] {
  /* ... */

如果您将该列表放在a中，原因是其他定义不应使用它，则最好使用一个附加的可选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"] {
  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;
}

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列表变量：

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

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

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

---

我不知道我必须在我称之为mixin的地方之外定义列表。它改变了一切：我只是在看到你的答案之前重写了我的mixin，我终于使用了一个我以前不知道的Arglist。它看起来有点像你上面所做的：$目标列表：alpha，beta，gamma@包括动态bg$路径、图标、png$目标列表。。。；如果我猜对了，$目标列表。。。是“无限”列表的最佳选择，而$targets列表是“有限”列表的最佳选择？谢谢你的回答，我真的很感激！很好：是的，就是我找到的这个！