//今天继续学习一下sass基础用法,主要内容有嵌套,混入,继承和导入sass文件
一、sass 的选择器嵌套
//和 html 一样让选择器也有一个上下级的关系
1. 后代选择器嵌套
=> 语法: 父级 { 子级 {} }
2. 子代选择器嵌套
=> 语法: 父级 { > 子级 {} }
3. 连字符选择器嵌套
=> 伪类选择器和伪元素选择器嵌套
=> 当你需要的伪类和伪元素和选择器连接再一起的时候
=> 使用 & 连接符操作
=> 语法: 选择器 { &:hover {} }
4. 群组选择器的嵌套(使用太少)
=> 语法: 群组选择器 { 子级 {} }
=> 语法: 选择器 { 群组选择器 {} }
=> 语法: 群组选择器 { 群组选择器 {} }
来看看代码
/* 4. 群组选择器嵌套 */
// .box1, .box2, .box3 {
// width: 100px;
// height: 100px;
// p {
// width: 30px;
// }
// }
// div {
// width: 100px;
// height: 100px;
// .box1, .box2, .box3 {
// color: red;
// }
// }
// .box1, .box2 {
// width: 100px;
// height: 100px;
// .list1, .list2 {
// color: red;
// }
// }
/* 3. 连字符选择器嵌套 */
// div {
// width: 100px;
// height: 100px;
// // 当鼠标悬停的