时间:2021-07-01 10:21:17 帮助过:85人阅读
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; }
有些时候需要直接使用嵌套外层的父选择器,这个就很有用了,例如,你可能喜欢给选择器指定 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 将抛出一个错误。
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;}
Sass 支持一种特殊类型的选择器,叫做”占位符选择器” (placeholder selector)。这些看起来像 class 和 id 选择器,除了 #或 .用 %替换。他们需要在中使用;有关详细信息,请参阅 @extend-Only Selectors 。
当他们单独使用的时候,即没有使用 @extend的,使用占位符选择器的规则集将不会被渲染为CSS。