很多人從使用Scss的那一刻起，就被別人告訴了如何編譯。所以，基本上也就只會(huì)一種命令編譯方式。其實(shí)Scss提供了4種風(fēng)格輸出CSS，以滿足更多人的需求。不同的輸出方式如下：
那么，以后就可以隨意的使用參數(shù)來(lái)生成自己喜歡的CSS風(fēng)格。
1、nested
nested為嵌套輸出風(fēng)格，即左花括號(hào)和CSS類名（第一行）齊行。右側(cè)花括號(hào)和最后一行齊行，不換行。
此風(fēng)格一般使用較少，因?yàn)檎＿@樣寫CSS的人不多，風(fēng)格比較別扭。
編譯命令為：
sass abc.scss:abc.css --style nested
生成結(jié)果：
.header { background: #f00; color: #000; font-size: 20px; }.sidebar { float: left; width: 300px; height: 500px; }.main { float: right; width: 800px; padding: 20px; min-height: 500px; }2、expanded
expanded為展開輸出方式，也是一般前端開發(fā)直接寫CSS使用較多的一種風(fēng)格。其左花括號(hào)和第一行齊行，不換行。右側(cè)的花括號(hào)在結(jié)尾處換行，另起一行。
編譯命令為：
sass abc.scss:abc.css --style expanded
生成結(jié)果：
.header { background: #f00; color: #000; font-size: 20px;}.sidebar { float: left; width: 300px; height: 500px;}.main { float: right; width: 800px; padding: 20px; min-height: 500px;}3、compact
compact為緊湊輸出方式，也是前端開發(fā)直接寫CSS使用較多的另外一種方式。其左花括號(hào)和右花括號(hào)均不換行。花括號(hào)內(nèi)的CSS屬性值也不換行，一個(gè)接著一個(gè)寫。
對(duì)于比較喜歡寫單行CSS的朋友十分友好。
編譯命令為：
sass abc.scss:abc.css --style compact
生成結(jié)果：
.header { background: #f00; color: #000; font-size: 20px; }.sidebar { float: left; width: 300px; height: 500px; }.main { float: right; width: 800px; padding: 20px; min-height: 500px; }4、compressed
compressed為壓縮輸出方式。其所有內(nèi)容均不換行，而且會(huì)刪除所有注釋和空格。把所有代碼壓成一團(tuán)。
一般在上線情況，或者完全不用閱讀修改CSS文件的情況下使用。文件會(huì)比較小。
編譯命令為：
sass abc.scss:abc.css --style compressed
生成結(jié)果：
.header{background:#f00;color:#000;font-size:20px}.sidebar{float:left;width:300px;height:500px}.main{float:right;width:800px;padding:20px;min-height:500px}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
