11. 输出格式 (Output Style)

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

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

11.1. :nested

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

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

11.2. :expanded

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

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

11.3. :compact

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

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

11.4. :compressed

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

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