文章彙整

如何修改Sass的輸出樣式

Astral WebBy Astral Web 2 years agoNo Comments
首頁  /  網站設計與開發  /  如何修改Sass的輸出樣式

sass

在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又要將CSS檔案最小化、減少檔案大小。在以往單純使用CSS開發時、我們也許會使用一些線上工具幫忙轉檔,現在我們使用SASS開發、只要修改專案的設定、馬上就能變更輸出的樣式。

 

Sass 共有四種輸出樣式

:nested

:compact

:expanded

:compressed

 

底下我們直接以一段代碼做示範。

SCSS

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid darken(#f5f5f5, 7%);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

output_style = :expanded

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}

output_style = :nested

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px; }
  .well blockquote {
    border-color: #ddd;
    border-color: rgba(0, 0, 0, 0.15); }

output_style = :compact

.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
.well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); }

 output_style = :compressed

.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}

 

歐斯瑞有限公司編寫製作

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。