4種靈活的Scss編譯輸出風格整理

tracy 發布于2019-08-30 15:56 / 3650人閱讀

摘要：編譯命令為生成結果為展開輸出方式，也是一般前端開發直接寫使用較多的一種風格。其所有內容均不換行，而且會刪除所有注釋和空格。

很多人從使用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使用較多的另外一種方式。其左花括號和右花括號均不換行。花括號內的CSS屬性值也不換行，一個接著一個寫。

對于比較喜歡寫單行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}

GPU云服務器云服務器 java 4種變量最靈活的編程語言 SCSS 免費的數據整理軟件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117502.html

CSS Modules詳解及React中實踐

摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

wemall 2019-08-30 15:45 評論0 收藏0
【Sass/SCSS】預加載器中的“軒轅劍”

摘要：預加載器中的軒轅劍，這也不是我幫它吹，是它自己說的，下圖為例。是由語言編寫的一款預處理語言，有嚴格的縮進風格。指令將文件包含在中，不需要額外的請求。語法指令告訴一個選擇器的樣式從另一選擇器繼承。【Sass/SCSS】預加載器中的軒轅劍博客說明文章所涉及的資料來自互聯網整理和個人總結，意在于個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！說明隨著前端技術發展的越來越迅速，前端的樣式...

cnsworder 2021-11-18 10:07 評論0 收藏0
前端架構gulp與webpack（知識點整理）

摘要：是通過加載器和插件對資源進行處理的。另外我們知道是對整個過程進行控制，所以在其配置文件中配置的每一個對項目中該配置路徑下所有的資源都可以管理。一概念介紹 gulp 是 task runner，Webpack 是 module bundler。可以這么說， Webpack 和 gulp 本身都有 95% 的功能是不能被對方替代，或者直接說和對方不重疊的。 1 什么是gulp Gulp...

willin 2019-08-21 18:34 評論0 收藏0
前端代碼評審 Checklist 清單

摘要：從而輔助整個團隊提高代碼質量統一代碼規范。如果你的團隊還沒有這么一份代碼評審清單，也許這正是你需要的如果你的團隊已經有了代碼評審參照標準，這份清單也許能起到錦上添花的效果。如果違反這個規則，那么代碼會很難被測試或者重用。前言 ? 前端團隊有評審代碼的要求，但由于每個開發人員的水平不同，技術關注點不同，所以對代碼評審的關注點不同，為了保證代碼質量，團隊代碼風格統一，特此擬定...

xzavier 2019-08-23 18:33 評論0 收藏0