SASS - 爲什麼這個mixin不包含在內？

Question

我是SASS的新手，所以如果這看起來很明顯，請耐心等待。

我有一些測試SASS代碼：

$background : "yellow"; 
$color : "green"; 

%my-placeholder { 

    background: $background; 
    color: $color; 

} 

@mixin my-mixin($background,$color) { 

    %my-placeholder { 

    background: $background; 
    color: $color; 

    } 

} 

.my-class { 

    /* Why does this 'my-mixin()' NOT get included to the class? */ 
    @include my-mixin($background,$color); 
    color: blue; 

} 

它的變量，佔位符和混入的組合，它輸出：

.my-class { 
    /* Why does this 'my-mixin()' NOT get included to the class? */ 
    color: blue; 
} 

正如你可以看到，混入的@include，其中包含覆蓋佔位符的調用，不會在.my-class選擇中使用。爲什麼是這樣？

我有一個SASS-師在這裏你可以看到這個活： http://sassmeister.com/gist/8015459

這是正常的行爲呢？是否有依賴關係，我錯過了爲了使用此功能？

謝謝！

Answer 1

它被包含在內，但你只是沒有調用它。 %是一個佔位符選擇器，因此在調用mixin後需要@extend %my-placeholder。這仍然會導致你可能並不期待的事情。

.my-class { 
    color: blue; 
} 
.my-class .my-class { 
    background: "yellow"; 
    color: "green"; 
} 

我想你可能會更好用簡單的混合，因爲你需要切換變量。

@mixin my-mixin($background: #ccc, $color: #000){ 
    background: $background; 
    color: $color; 
} 

.my-class { 
    @include my-mixin(red, green); 
} 

此外，似乎你可能會認爲在選擇器中定義的變量會使其成爲本地的，但事實並非如此。在我學習的時候，它肯定會讓我感到一種循環。

$color: red; 

.foo { 
    $color: blue; 
    color: $color; // $color is blue... 
} 

.bar { 
    color: $color; // $color is still blue, not red... 
}