成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

4種靈活的Scss編譯輸出風(fēng)格整理

tracy / 3648人閱讀

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

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

嵌套輸出方式 nested

展開輸出方式 expanded

緊湊輸出方式 compact

壓縮輸出方式 compressed

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

來一個(gè)導(dǎo)航推薦，筆點(diǎn)網(wǎng)址導(dǎo)航 - 用心做最簡潔的網(wǎng)址導(dǎo)航

1、nested

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

此風(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)格。其左花括號和第一行齊行，不換行。右側(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屬性值也不換行，一個(gè)接著一個(gè)寫。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117502.html

相關(guān)文章

  • CSS Modules詳解及React中實(shí)踐

    摘要：上例中打印的結(jié)果是對中的名都做了處理，使用對象來保存原和混淆后的對應(yīng)關(guān)系。結(jié)合實(shí)踐在處直接使用中名即可。如因?yàn)橹粫D(zhuǎn)變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領(lǐng)域中進(jìn)化最慢的一塊。由于 ES2015/201...

    wemall 評論0 收藏0

  • 【Sass/SCSS】預(yù)加載器中的“軒轅劍”

    摘要：預(yù)加載器中的軒轅劍，這也不是我?guī)退?，是它自己說的，下圖為例。是由語言編寫的一款預(yù)處理語言，有嚴(yán)格的縮進(jìn)風(fēng)格。指令將文件包含在中，不需要額外的請求。語法指令告訴一個(gè)選擇器的樣式從另一選擇器繼承?！維ass/SCSS】預(yù)加載器中的軒轅劍博客說明文章所涉及的資料來自互聯(lián)網(wǎng)整理和個(gè)人總結(jié)，意在于個(gè)人學(xué)習(xí)和經(jīng)驗(yàn)匯總，如有什么地方侵權(quán)，請聯(lián)系本人刪除，謝謝！說明隨著前端技術(shù)發(fā)展的越來越迅速，前端的樣式...

    cnsworder 評論0 收藏0

  • 前端架構(gòu)gulp與webpack（知識點(diǎn)整理）

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

    willin 評論0 收藏0

  • 前端代碼評審 Checklist 清單

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

    xzavier 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<