Scss編譯輸出風(fēng)格的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹Scss編譯輸出風(fēng)格的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)服務(wù)項目包括隴縣網(wǎng)站建設(shè)、隴縣網(wǎng)站制作、隴縣網(wǎng)頁制作以及隴縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，隴縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到隴縣省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

很多人從使用Scss的那一刻起，就被別人告訴了如何編譯。所以，基本上也就只會一種命令編譯方式。其實Scss提供了4種風(fēng)格輸出CSS，以滿足更多人的需求。不同的輸出方式如下：

• 嵌套輸出方式 nested

• 展開輸出方式 expanded

• 緊湊輸出方式 compact

• 壓縮輸出方式 compressed

那么，以后就可以隨意的使用參數(shù)來生成自己喜歡的CSS風(fēng)格。

1、nested

nested為嵌套輸出風(fēng)格，即左花括號和CSS類名（第一行）齊行。右側(cè)花括號和最后一行齊行，不換行。

此風(fēng)格一般使用較少，因為正常這樣寫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)格。其左花括號和第一行齊行，不換行。右側(cè)的花括號在結(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使用較多的另外一種方式。其左花括號和右花括號均不換行?；ɡㄌ杻?nèi)的CSS屬性值也不換行，一個接著一個寫。

對于比較喜歡寫單行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)容均不換行，而且會刪除所有注釋和空格。把所有代碼壓成一團(tuán)。

一般在上線情況，或者完全不用閱讀修改CSS文件的情況下使用。文件會比較小。

編譯命令為：

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}

以上是“Scss編譯輸出風(fēng)格的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：Scss編譯輸出風(fēng)格的示例分析-創(chuàng)新互聯(lián)
本文URL：http://muchs.cn/article22/cesecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、全網(wǎng)營銷推廣、軟件開發(fā)、品牌網(wǎng)站建設(shè)、做網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)