这章我们讲“嵌套”，嵌套包括两种：一，选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多
一，选择器嵌套：指的是在一个选择器中嵌套另一个选择器来实现继承。使用&表示父元素选择器
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;
转载于:https://www.cnblogs.com/937522zy/p/5532147.html
相关资源：JAVA上百实例源码以及开源项目