是否可以創建一個本地/私人sass mixin？

Question

我有三個青菜文件：a.scss，b.scss，c.scss

a.scss：

@mixin font($size, $color){ 
    font-size: #{$size}; 
    color: #{$color} 
    } 

p{ 
    @include font(10px, blue) 
    } 

b.scss：

@mixin font() 
{ 
.. 
} 

c.scss

@import a.scss 
@import b.scss 

我認爲b.scss中的mixin字體（）會覆蓋a.scss中的mixin字體（$ size，$ color）。

p{ 
    @include font(10px, blue) // use mixin font() in b.scss, error 
    } 

是否可以創建一個本地/私人sass混合？或者sass中的所有mixin都是全局的，我必須爲每個mixin賦予它們獨特的名稱？

Answer 1

你說得對。就像在一個典型的CSS文件中一樣，您的sass項目是自上而下編譯的。因此，與前一個共享同名的mixin會覆蓋它。如果你想在c.scss中使用原始的mixin，你將不得不重新定義它。

Answer 2

選擇器中的混合是局部的，就像Sass變量一樣。這兩個混入是相互獨立的：

.foo{ 
    @mixin my_color(){ 
     color: #ffcc00; 
    } 
    @include my_color; 
} 

.bar{ 
    @mixin my_color(){ 
     color: #00ffcc; 
    } 
    @include my_color; 
} 

因此，要回答你的最後一個問題 - 只能在全局級別定義混入是全球性的，你可以放心地另有重用的名字。在你的例子中，如果你的a.scss，b.scss和c.scss被構造爲定義不同的總體類（例如.header，.main，.footer），你可以爲每個類設置本地字體混合。

相關：Localizing/Scoping a sass mixin。