SCSS：Mixin和多个列表问题

Question

我尝试使用mixins学习scss列表。

我写了一个简单的混合，它添加一个关于列表中变量的背景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; 
} 

，但我得到这个错误： 未定义的变量：“$源列表”

，如果我在的混入_mixins.scss前添加列表内容它工作正常，但如果让我无法只需修改列表的内容即可反复使用它。

我错过了什么吗？

由于提前，

AW

Answer 1

，如果我在_mixins.scss的混入前添加列表内容它工作正常，但如果让我无法遍地重复使用只需修改列表的内容。

当调用mixin时，由于您在a { ... }部分中定义了它，因此您的列表超出了范围。为了让列表对你的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内部的原因，没有其他的定义应该能够利用它，你最好去额外（可选）混入参数：

@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变量：

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