css - 指南针输出样式

Question

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

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

Answer 1

输出样式包含在SASS 文档中。

尽管 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}

Answer 2

啊，我现在明白了.. :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}