sass系列之css3-分裂规则

以前在项目中也有用过sass这个高于css的元语言，没有完全的学过，这几天正好学习之，今天就对于compass中的分裂规则混合宏来开篇。

分裂规则

在css3中，分列跪着是容许开发人员多列显示元素内容的，详细内容点这里，固然一谈到css属性的兼容就头疼，咱们用sass开发就没必要担忧了。

<div id="box" class="three-cols">
    <p>这是一段神奇的文字...</p>
    <p>这是一段神奇的文字...</p>
    <p>这是一段神奇的文字...</p>
</div>

上面的是一个box盒子中有3段文字，box上有一个类名为three-cols的类名，好来看sass代码

@import "compass";
.three-cols{
     @include column-count(3);

}

咱们用import引入compass，而后在three-cols中，用@include来引入分列宏。
下面是生成的css代码。

/* line 2, ../sass/index.scss */
.three-cols {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3; }

怎么样是否是不用考虑前缀的问题了，可是要注意，有些css3宏，compass并无作兼容处理的，当碰到这种状况，你们就要本身写宏了。

固然column-count(3);这个宏的意思就是指定列数。若是想要知道更多的关于这个宏的信息就查找compass的官方网站吧，附上连接