罗盘输出样式

Question

罗盘输出样式

csssasscompass-sass

12

有人找到了关于Compass中output_style不同值的文档吗？选项有：：expanded、：nested、：compact和：compressed。我知道最后一个是什么，但其他选项是做什么的呢？

看起来我必须重新编译所有CSS才能弄清楚这些不同选项的效果，有点浪费时间啊。

- And Finally

2个回答

0

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

: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}

- And Finally

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrey Mikhaylov - lolmaus · Accepted Answer

输出样式在SASS文档中有介绍。

虽然Sass默认的CSS样式非常好，反映了文档的结构，但口味和需求各不相同，因此Sass支持几种其他样式。

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

:nested

嵌套样式是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; }
:compressed

压缩样式表将尽可能占用最少的空间，除了必要的选择器分隔符和文件末尾的换行符之外，没有任何空格。它还包括一些其他的小压缩，例如选择颜色时选择最小的表示方式。压缩样式表并不适合人类阅读。例如：
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}