有人找到了关于Compass中output_style不同值的文档吗?选项有::expanded、:nested、:compact和:compressed。我知道最后一个是什么,但其他选项是做什么的呢?
看起来我必须重新编译所有CSS才能弄清楚这些不同选项的效果,有点浪费时间啊。
有人找到了关于Compass中output_style不同值的文档吗?选项有::expanded、:nested、:compact和:compressed。我知道最后一个是什么,但其他选项是做什么的呢?
看起来我必须重新编译所有CSS才能弄清楚这些不同选项的效果,有点浪费时间啊。
输出样式在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}
#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}
--style compact
和--style expanded
。例如,我希望我的文件assets/scss/colors.scss
被编译为assets/css/expanded/colors.css
和assets/css/minified/colors.min.css
。请参见https://dev59.com/pnrZa4cB1Zd3GeqP5a6l。 - John Slegers