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的官方网站吧，附上链接