11. 输出格式 (Output Style)

11. 输出格式 (Output Style)

Sass 默认的 CSS 输出格式很美观也能清晰反映文档结构，为满足其他需求 Sass 也提供了多种输出格式。

Sass 提供了四种输出格式，可以通过 :style option 选项设定，或者在命令行中使用 —style 选项。

11.1. :nested

Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。

  2. 1. #main {
  3. 2. color: #fff;
  4. 3. background-color: #000; }
  5. 4. #main p {
  6. 5. width: 10em; }
  8. 7. .huge {
  9. 8. font-size: 10em;
  10. 9. font-weight: bold;
  11. 10. text-decoration: underline; }

11.2. :expanded

Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

  2. 1. #main {
  3. 2. color: #fff;
  4. 3. background-color: #000;
  5. 4. }
  6. 5. #main p {
  7. 6. width: 10em;
  8. 7. }
  10. 9. .huge {
  11. 10. font-size: 10em;
  12. 11. font-weight: bold;
  13. 12. text-decoration: underline;
  14. 13. }

11.3. :compact

Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

  2. 1. #main { color: #fff; background-color: #000; }
  3. 2. #main p { width: 10em; }
  5. 4. .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

11.4. :compressed

Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

  2. 1. #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}