Sass对CSS的扩展

翻译自sass官方文档： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions

嵌套规则 (Nested Rules)

Sass 允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内（愚人码头注：可以理解为层级选择器），例如：

				#main p {
				color: #00ff00;
				width: 97%;
				.redbox {
				background-color: #ff0000;
				color: #000000;
				}
				}
			

编译为：

				#main p {
				color: #00ff00;
				width: 97%; }
				#main p .redbox {
				background-color: #ff0000;
				color: #000000; }
			

这有助于避免父选择器重复，相对于复杂的CSS布局中多层嵌套的选择器 要简单得多。 例如：

				#main {
				width: 97%;
				p, div {
				font-size: 2em;
				a { font-weight: bold; }
				}
				pre { font-size: 3em; }
				}
			

编译为：

				#main {
				width: 97%; }
				#main p, #main div {
				font-size: 2em; }
				#main p a, #main div a {
				font-weight: bold; }
				#main pre {
				font-size: 3em; }
			

引用父选择器:& (Referencing Parent Selectors: &) {#parent-selector}

有些时候需要直接使用嵌套外层的父选择器，这个就很有用了，例如，你可能喜欢给选择器指定 hover样式，或者当body元素具有某个样式时，在这些情况下，你可以 & 字符来明确地表示插入指定父选择器。 例如：

				a {
				font-weight: bold;
				text-decoration: none;
				&:hover { text-decoration: underline; }
				body.firefox & { font-weight: normal; }
				}
			

编译为：

				a {
				font-weight: bold;
				text-decoration: none; }
				a:hover {
				text-decoration: underline; }
				body.firefox a {
				font-weight: normal; }
			

& 将替换为呈现在CSS文件中的父选择器。这意味着，如果你有一个多层嵌套的规则，父选择器将在被 & 替换之前完全分解。 例如：

				#main {
				color: black;
				a {
				font-weight: bold;
				&:hover { color: red; }
				}
				}
			

编译为：

				#main {
				color: black; }
				#main a {
				font-weight: bold; }
				#main a:hover {
				color: red; }
			

& 必须出现在的选择器的开头位置（愚人码头注：也就是作为选择器的第一个字符），但可以跟随后缀，将被添加到父选择的后面。 例如：

				#main {
				color: black;
				&-sidebar { border: 1px solid; }
				}
			

编译为：

				#main {
				color: black; }
				#main-sidebar {
				border: 1px solid; }
			

父选择器 & 被作为一个后缀的时候，Sass 将抛出一个错误。

嵌套属性 (Nested Properties)

CSS中有一些属性遵循相同的“命名空间”；比如， font-family , font-size , 和 font-weight 都在 font 命名空间中。在CSS中，如果你想在同一个命名空间中设置一串属性，你必须每次都输出来。Sass为此提供了一个快捷方式：只需要输入一次命名空间，然后在其内部嵌套子属性。例如：

				.funky {
				font: {
				family: fantasy;
				size: 30em;
				weight: bold;
				}
				}
			

编译为：

				.funky {
				font-family: fantasy;
				font-size: 30em;
				font-weight: bold; }
			

命名空间也可以有自己的属性值。例如：

				.funky {
				font: 20px/24px fantasy {
				weight: bold;
				}
				}
			

编译为：

				.funky {
				font: 20px/24px fantasy;
				font-weight: bold;
				}
			

占位符选择器: %foo (Placeholder Selectors: %foo )

Sass 支持一种特殊类型的选择器,叫做”占位符选择器” (placeholder selector)。这些看起来像 class 和 id 选择器，除了 # 或 . 用 % 替换。他们需要在 @extend 指令 中使用;有关详细信息，请参阅 @extend -Only Selectors 。

当他们单独使用的时候，即没有使用 @extend 的，使用占位符选择器的规则集将不会被渲染为CSS。