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

问题描述

问 题

刚开始接触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;
}

解决方案

因为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属性也能抽出来合并；

这篇关于sass中调用占位选择器之后解析出来css文件的样式为什么是分开的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！