這篇文章主要介紹Scss編譯輸出風格的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創新互聯服務項目包括隴縣網站建設、隴縣網站制作、隴縣網頁制作以及隴縣網絡營銷策劃等。多年來,我們專注于互聯網行業,利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等,向廣大中小型企業、政府機構等提供互聯網行業的解決方案,隴縣網站推廣取得了明顯的社會效益與經濟效益。目前,我們服務的客戶以成都為中心已經輻射到隴縣省份的部分城市,未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任!很多人從使用Scss的那一刻起,就被別人告訴了如何編譯。所以,基本上也就只會一種命令編譯方式。其實Scss提供了4種風格輸出CSS,以滿足更多人的需求。不同的輸出方式如下:
嵌套輸出方式 nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed
那么,以后就可以隨意的使用參數來生成自己喜歡的CSS風格。
1、nested
nested為嵌套輸出風格,即左花括號和CSS類名(第一行)齊行。右側花括號和最后一行齊行,不換行。
此風格一般使用較少,因為正常這樣寫CSS的人不多,風格比較別扭。
編譯命令為:
sass abc.scss:abc.css --style nested
生成結果:
.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為展開輸出方式,也是一般前端開發直接寫CSS使用較多的一種風格。其左花括號和第一行齊行,不換行。右側的花括號在結尾處換行,另起一行。
編譯命令為:
sass abc.scss:abc.css --style expanded
生成結果:
.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為緊湊輸出方式,也是前端開發直接寫CSS使用較多的另外一種方式。其左花括號和右花括號均不換行?;ɡㄌ杻鹊腃SS屬性值也不換行,一個接著一個寫。
對于比較喜歡寫單行CSS的朋友十分友好。
編譯命令為:
sass abc.scss:abc.css --style compact
生成結果:
.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為壓縮輸出方式。其所有內容均不換行,而且會刪除所有注釋和空格。把所有代碼壓成一團。
一般在上線情況,或者完全不用閱讀修改CSS文件的情況下使用。文件會比較小。
編譯命令為:
sass abc.scss:abc.css --style compressed
生成結果:
.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編譯輸出風格的示例分析”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!
分享題目:Scss編譯輸出風格的示例分析-創新互聯
本文URL:http://vcdvsql.cn/article22/cesecc.html
成都網站建設公司_創新互聯,為您提供外貿建站、全網營銷推廣、軟件開發、品牌網站建設、做網站、ChatGPT
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯