sass的幾種輸出格式，你都知道嗎

輸出格式說明

Sass編譯輸出的CSS格式可以自定義。

有4種輸出格式：

• :nested – 嵌套格式
• :expanded – 展開格式
• :compact – 緊湊格式
• :compressed – 壓縮格式

預設格式是:nested。

可以使用:style選項或使用style命令行參數設置輸出格式。

命令標準格式：

sass  --watch   (scss文件):(要生成的目標css文件)  --style  (輸出格式)

例如：

sass --watch index.scss:index.css --style compressed

不同格式輸出

接下來我們把如下的css經過不同格式的編譯，看不同輸出格式的區別：

html{
    font-size: 12px;
    color: #333;
}
.container{
    font-size: 14px;
    .header{
        width: 50%;
        height: 30px;
        .left{
            float: left;
        }
    }
    .footer{
        background-color: green;
    }
    &::after{
        display: inline-block;
    }
}

nested – 嵌套格式

html {
  font-size: 12px;
  color: #333; }

.container {
  font-size: 14px; }
  .container .header {
    width: 50%;
    height: 30px; }
    .container .header .left {
      float: left; }
  .container .footer {
    background-color: green; }
  .container::after {
    display: inline-block; }

expanded – 展開格式

html {
  font-size: 12px;
  color: #333;
}

.container {
  font-size: 14px;
}

.container .header {
  width: 50%;
  height: 30px;
}

.container .header .left {
  float: left;
}

.container .footer {
  background-color: green;
}

.container::after {
  display: inline-block;
}

compact – 緊湊格式

html { font-size: 12px; color: #333; }

.container { font-size: 14px; }

.container .header { width: 50%; height: 30px; }

.container .header .left { float: left; }

.container .footer { background-color: green; }

.container::after { display: inline-block; }

compressed – 壓縮格式

html{font-size:12px;color:#333}.container{font-size:14px}.container .header{width:50%;height:30px}.container .header .left{float:left}.container .footer{background-color:green}.container::after{display:inline-block}

總結

通過觀察不同的輸出格式可以看出，compressed – 壓縮格式 轉出的文件是最小的，所以該格式通過為項目發佈時設置的格式，開發階段為了更好地觀察編譯結果，通過設置為expanded – 展開格式，也可以設置為compact – 緊湊格式，根據自己的喜好來。

這就是sass的四種轉出格式的詳細介紹。