SASS詳解之編譯輸出的樣式

sass是一種css預處理語言，沒有裝環境的話是不能被解析的。但是有了koala編譯工具之後，解析sass不需要環境也毫無壓力了。sass的輸出格式有四種：巢狀、擴大、緊湊和壓縮。下面結合小例子為大家一一介紹。

巢狀的風格是預設sass風格，因為它反映的css樣式和html文件的結構很相似。每個屬性都有其自己的巢狀。巢狀式大型css檔案時，看著是非常有用的，它可以讓你輕鬆掌握檔案的結構沒有什麼實際閱讀。反而包含的選擇器多了，看起來很是費勁。小例子如下

sass**

div div a

div a:hover

編譯後的css**

div div a

div a:hover

展開是乙個比較典型的人類製造的css樣式，每個屬性和屬性值佔一行。小例子如下

sass**

div 
a }
}}

編譯後的css**

div div a

div a:hover

緊湊的風格比巢狀或展開占用的空間較少。每個css規則只占用一行，在該行定義每個屬性。巢狀規則放置在屬性旁邊沒有換行。小例子如下

sass**

div 
a }
}}

編譯後的css**

div div a

div a:hover

壓縮式占用空間的可能的最小量的，把不必要的空格都刪除掉，然後每個屬性，每個屬性值，每個選擇器僅僅挨在一起。小例子如下

sass**

div 
a }
}}

編譯後的css**

divdiv adiv a:hover