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