Sass入门到进阶

一、变量

$my-color:red
.box{
  color:$my-color;
}

二、嵌套规则

• 选择器的嵌套：

.box{
     color:red;
  .childrenBox{
     color:blue
    }
    h1,h2{
    color:yellow  
}

  &:hover{
    color:black
  }
}

编译后的结果

···
.box{color:red}
.box .children{color:blue}
.box h1,.box h2{color:yellow}
.box:hover{color:black}
···

• 可以配合其它选择其进行嵌套
  div>p：命中div的直接子代P，孙不会被命中。
  h+p ： 只会命中第一个相邻的匹配元素。
  h~p : 命中同级后面所有P

• 属性的嵌套

.box{
    border:1px solid black{
        left:0px;
        bottom:0px
    } 
}

编译后：
···
.box{border:1px solid black;
border-left:0px;
border-bottom:0px;
}
···

导入规则