指南针输出样式

Question

有没有人找到任何文档说明 Compass 中 output_style 的不同值的含义？选项是 :expanded、:nested、:compact 和 :compressed。我可以看到最后一个是什么，但其他人是做什么的？

我必须重新编译所有的 CSS 来弄清楚这些不同的选项会产生什么，这似乎有点浪费。

Answer 1

啊我现在明白了.. :expanded 是默认值：

:展开

#date .day {
  display: block;
  padding-top: 5px;
  font-size: 30px;
  color: #AAA;
}

:嵌套

#date .day {
  display: block;
  padding-top: 5px;
  font-size: 30px;
  color: #AAA; }

:紧凑

#date .day { display: block; padding-top: 5px; font-size: 30px; color: #AAA; }

:压缩

#date .day{display:block;padding-top:5px;font-size:30px;color:#AAA}

Answer 2

SASS documentation 中涵盖了输出样式。

虽然 Sass 输出的默认 CSS 样式非常好，而且 反映了文件的结构，口味和需求各不相同等等 Sass 支持其他几种样式。

Sass 允许您通过以下方式在四种不同的输出样式之间进行选择 设置 :style 选项或使用 --style 命令行标志。

:嵌套

嵌套样式是默认的 Sass 样式，因为它反映了 CSS 样式的结构和它们正在设置样式的 HTML 文档。 每个属性都有自己的行，但缩进不是恒定的。 每个规则都根据嵌套的深度进行缩进。例如：

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

嵌套样式在查看大型 CSS 文件时非常有用：它允许 您无需实际阅读即可轻松掌握文件的结构 任何东西。

:展开

Expanded 是一种比较典型的人造 CSS 样式，每个属性 并规则占用一条线。属性在规则内缩进， 但规则没有以任何特殊方式缩进。例如：

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:紧凑

紧凑样式比嵌套或扩展占用更少的空间。它也是 将焦点更多地吸引到选择器而不是它们的属性。每个 CSS 规则只占一行，每个属性都在该行上定义 线。嵌套规则彼此相邻放置，没有换行符， 而单独的规则组之间有换行符。为了 示例：

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:压缩

压缩样式占用尽可能少的空间，具有 除了分隔选择器和 文件末尾的换行符。它还包括一些其他的小 压缩，例如选择颜色的最小表示。 它并不意味着人类可读。例如：

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