002.使用嵌套
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
1. 父选择器的标识符&
article a {
color: blue;
:hover { color: red }
}
编译后
article a { color: blue }
article a:hover { color: red }
2. 群组选择器的嵌套
nav, aside {
a {color: blue}
}
编译后
nav a, aside a {color: blue}
3. 子组合选择器和同层组合选择器:>、+和~
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
4. 嵌套属性
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
编译后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
5. 嵌套媒体查询
nav {
width:1200px;
@media (max-width:768px) {
width:100%;
}
}
编译后
nav {
width:1200px;
}
@media (max-width:768px) {
nav{
width:100%;
}
}
6. @at-root 指令
.content {
border:1px solid #ccc;
@at-root .content-left { color:#666; }
@at-root {
.content-right-nav { height:120px; }
.content-right-body { height:600px; }
}
}
编译后
.content { border:1px solid #ccc; }
.content-left { color:#666; }
.content-right-nav { height:120px; }
.content-right-body { height:600px; }
7. 使用@ at-root 将嵌套指令移出
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}
编译后
@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}