sass文件-嵌套规则

1. sass允许将一套CSS样式嵌套进另一套样式中。
   【目的】：避免了重复输入父选择器，结构看起来更清晰并且易于管理。

其中：
（1）内层的样式将它外层的选择器作为父选择器
（2）&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。&所在的位置只代表了他的父亲，也就是说在每一层，指向是都是他所在的父元素。

#app {  h1 {text-align: center;&:hover { color: red; }}&:hover { text-decoration: underline; }
}等同于#app h1 { text-align: center; 
}
/*#app中的h1应用了text-align样式*/
#app h1:hover { text-align: center; 
}
#app:hover {text-decoration: underline;
}

(3)属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如

.funky {font: {family: fantasy;size: 30em;weight: bold;}
}/*编译后*/
.funky {font-family: fantasy;font-size: 30em;font-weight: bold; 
}

参考：Scss中的嵌套规则

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！