指南针output_style

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}