天天看点

Sass 嵌套

sass 允许我们将以与html相同的方式嵌套css选择器,将一套 css 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,比如:

嵌套功能避免了重复输入父选择器,而且也使得复杂的 css 结构更加便于管理。

注意:在sass中,ul、li和a选择器嵌套是在nav选择器中的,在css中,规则时逐个定义的(不是嵌套的)。

在嵌套 css 规则时,有时候我们需要直接使用到嵌套外层的父选择器,比如,当给某一个元素设定 hover 样式时或者是当 body 元素有个 classname 时,可以用 & 代表嵌套规则外层的父选择器。

许多css属性具有相同的前缀 ,比如 font-family,font-size,font-weight ,text-align,text-transform,text-overflow 前三者和后三者分别是以 font 和 text 作为属性的命名空间,为了便于管理这样的属性,同时也为了避免重复输入,sass 允许将属性嵌套在命名空间中。

sass 额外提供了一种特殊类型的选择器:占位符选择器 (placeholder selector),它与常用的 id 与 class 选择器写法相似,只是 # 或 . 替换成了 %,必须通过 @extend 指令调用。