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