选择器嵌套
body {
margin:0;
header{
margin:5px;
}
}
编译之后>>>>
body {
background-color: lightgray;
}
body header {
background-color: lightgreen;
}
属性嵌套
footer{
background:{
color:red;
size : 100% 50%;
position: center;
}
}
编译之后>>>>
body footer {
background-color: red;
background-size: 100% 50%;
background-position: center; }
hover和内部class
body{
a:hover {
color: red;
}
span {
&:hover {
color: blue;
}
color: red;
//内部class
//注意&.content 和 .content的区别
&.content { color:green; }
.content2 {color:red;}
}
}
编译之后>>>
body a:hover {
color: red;
}
body span {
color: red;
}
body span:hover {
color: blue;
}
/*这是 &.content*/
body span.content {
color: green;
}
/*这是 .content*/
body span .content2 {
color: red;
}
@at-root :意思是跳出根部嵌套选择器
body{
@at-root .container{
width:995px;
}
}
//编译之后
.container {
width: 995px;
}
//就不会包含在body里面了
注意 如果是在@medio里面
body {
@media screen and (max-width:600px){
.content4 {
color:#000;
}
//跳出了media 但是没跳出body
@at-root (without : media){
.content3{
color:#ccc;
}
}
//跳出了body
@at-root (without : media rule){
.content5{
color:#ccc;
}
}
}
}
编译之后>>>
@media screen and (max-width: 600px) {
body .content4 {
color: #000;
}
}
body .content3 {
color: #ccc;
}
.content5 {
color: #ccc;
}
需要注意
.foo {
@at-root .bar {
color: gray;
@at-root button{
color:red;
@at-root span {
color: orange;
}
}
}
}
//编译之后
.bar {
color: gray;
}
button {
color: red;
}
span {
color: orange;
}
默认@at-root只会跳出选择器嵌套,而不能跳出@media或@support,如果要跳出这两种,则需使用@at-root(without: media),@at-root(without :support)。这个语法的关键字有四个: all(表示所有),rule(表示常规css),media,support。默认的@at-root其实就是@at-root(without : rule)
@at-root 与 &
@at-root .text-info{
color:red;
@at-root nav &{
color:blue;
}
}
//编译后
.text-info {
color: red;
}
nav .text-info {
color: blue;
}