sass学习入门篇（三）
这章我们讲“嵌套”，嵌套包括两种：一，选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多
一，选择器嵌套：指的是在一个选择器中嵌套另一个选择器来实现继承。使用&表示父元素选择器
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;本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-05-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读