Sass语法--嵌套

选择器嵌套

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;
}