sass中调用占位选择器之后解析出来css文件的样式为什么是分开的？

Question

刚开始接触sass，用的koala解析的，我希望解析之后的css也是在一起的，是该在koala中设置什么吗？

这个是scss中的

$w:300px;
%text{text-align: center;}
$bg:red;
%border{border: 1px solid #000000;}

div{
  height: $w;
  @extend %text;
  background: $bg;
  @extend %border;
}

解析出来的css

div {
  text-align: center;
}
div {
  border: 1px solid #000000;
}
div {
  height: 300px;
  background: red;
}

Answer 1

因为sass编译的机制就是这样。。
所以placeHoder（也就是你说的占位符选择器），一般用于内容不变，高复用CSS样式，比如:

%clearfix {
    *zoom:  1;
    &:before,  &:after {
        display:  table;
        content:  '';
    }
    &:after {
        clear:  both;
        overflow:  hidden;
    }
}

你这个border要复用的话，一般用@mixin

@mixin border($value...) {
    border:$value;
}

最后，如果你一定要用你那种搞法，你可以使用工具处理，比如gulp-cssnano,会把一个标签/选择器下面分开的css属性都合并到一起，多个不同标签/选择器里相同的css属性也能抽出来合并；

Answer 2

这里不要用继承比较好，用变量就可以满足你了，或者用混合器

因为继承一般用于建立在语义的层级关系上使用继承以复用样式

但是一般展现层上的复用，如果是多段CSS规则，就用混合器，如果是一行，就用变量就好

最后如果复用程度不高，那压根不用复用，直接写进去就好

PS：继承的思路是这样的，如果 a @extend b，那么在所有b选择器出现的地方，用a, b这一序列选择器代替，然后打开，如果b是有占位符的，那么就会只有a，而不会有b