这章我们讲“嵌套”,嵌套包括两种:一,选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多
一,选择器嵌套:指的是在一个选择器中嵌套另一个选择器来实现继承。使用&
表示父元素选择器
li{ float :left; a{ color:#fff; &:hover{ color:#ddd; } } }
跟css用法一样,没什么说的。
二,属性嵌套,指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头
.fshadow{ boder:{ style:solid; left:{width:4px;color:#333;} } }
这种用法倒是没见过,可以试试。
三,@at-root是sass3.3.0版本的新增功能,用来跳出选择嵌套的
//没有跳出 .parent-1 { color:#f00; .child { width:100px; } } //单个选择器跳出 .parent-2 { color:#f00; @at-root .child { width:200px; } } //多个选择器跳出 .parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } } }
解析的css:
//没有跳出 .parent-1 { color: #f00; } .parent-1 .child { width: 100px; } //单个跳出 .parent-2 { color: #f00; } .child { width: 200px; } //多个跳出 .parent-3 { background: #f00; } .child1 { width: 300px; } .child2 { width: 400px;
时间: 2024-10-12 12:42:21