sass-选择器

1.嵌套

/* scss代码 */
.container{

    font-size:18px;
    
    .content{
        width: 40px;
    }

    .footer{
        background: red;
    }

    .nav{
        height: 60px;
    }

}

/* 生成的css */
.container {
  font-size: 18px;
}
.container .content {
  width: 40px;
}
.container .footer {
  background: red;
}
.container .nav {
  height: 60px;
}/*# sourceMappingURL=选择器-嵌套.css.map */

2.父选择器&

/* scss代码 */
.container{
    a{
        list-style: none;
        /* &代表的是当前父元素 在此&表示的是a标签 */
        &:hover{
            background: red;
        }
    }

    .top{
        border: 3px solid red;

        /* &代表的是当前父元素 在此&表示的是.top */
        &-left{
          float: left;
          width: 200px;  
        }
    }
}

/* 生成的css代码 */
.container a {
  list-style: none;
  /* &代表的是当前父元素 在此&表示的是a标签 */
}
.container a:hover {
  background: red;
}
.container .top {
  border: 3px solid red;
  /* &代表的是当前父元素 在此&表示的是.top */
}
.container .top-left {
  float: left;
  width: 200px;
}

3.属性嵌套

    /* scss代码 */
    p{
        /*属性也可以嵌套 font-size变成以下 但在:后面有空格 */
        font: {
            size: 20px;
            weight: bold;
            style: normal;
            family: 'Courier New', Courier, monospace;
        }
        
    }
    
    /* 生成的css代码 */
    p {
         /*属性也可以嵌套 font-size变成以下 但在:后面有空格 */
         font-size: 20px;
         font-weight: bold;
         font-style: normal;
         font-family: "Courier New", Courier, monospace;
    }/*# sourceMappingURL=选择器-属性嵌套.css.map */