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