SASS scss - 覆蓋現有的佔位符（無聲類）

Question

我不能理解某些認爲SASS不允許重寫現有靜默類（佔位符）的東西。拿下面的代碼...

%testing { 
    font-size: 1em; 
} 
%testing { 
    font-size: 4em; 
} 
.i-expect-4em { 
    @extend %testing; 
} 

爲什麼這會輸出以下內容？

.i-expect-4em { 
    font-size: 1em; 
} 
.i-expect-4em { 
    font-size: 4em; 
} 

兩者都輸出那裏我只瞄準不得不在流動後細化無聲類的能力，但在輸出之前。

Answer 1

你得到的輸出是打算的。 Sass中的普通類和無聲類之間的唯一區別是在生成的CSS中找不到靜默類的選擇器。你的沉默類更改爲正常類，看看什麼是真正發生的事情：

.testing { 
    font-size: 1em; 
} 
.testing { 
    font-size: 4em; 
} 
.i-expect-4em { 
    @extend .testing; 
} 

輸出：

.testing, .i-expect-4em { 
    font-size: 1em; 
} 

.testing, .i-expect-4em { 
    font-size: 4em; 
} 

Answer 2

這不僅是正常的，但也是非常有用的。

想象這樣的情況：

.testing { 
    font-size: 1em; 
} 
.testing { 
    font-weight: bold; 
} 
.i-expect-4em { 
    @extend .testing; 
} 

如果它不會延長他們兩個，你將失去的屬性之一。此外，它不是一個問題，因爲順序被保留，它不會改變計算風格。 gzip會大大降低大小開銷。

Answer 3

你可以用青菜地圖作爲altrenative沒有佔位符的

$sizes: (
    testing-1: 5em, 
    testing-2: 10em, 
    testing-3: 15em 
); 


h1 { 
    font-size: map-get($sizes, testing-2); 
} 

輸出

h1 { 
    font-size: 10em; 
} 

一個例子：http://sassmeister.com/gist/4828e67e45eb4857a8bf