8：sass中的嵌套

sass中嵌套的使用

1：选择器嵌套

选择器嵌套会导致代码冗余，难以阅读，建议不要使用选择器嵌套

sass

div {
  h1{
    color:#000;
  }
}
nav a{
  color:#00f;
  header &{
    color:#0f0
  }
}

css：

div h1 {
  color: #000; }

nav a {
  color: #00f; }
  header nav a {
    color: #0f0; }

2：属性嵌套

主要针对的是margin、padding、font、border

sass：

.box{
  border:{
    top:1px solid #00a1d2;
    right:1px solid #0A246A;
    bottom:1px solid #00b700;
    left:1px solid #1a2129;
  }
  font:{
    size:12px;
    weight:bold;
  }
}

css：

.box {
  border-top: 1px solid #00a1d2;
  border-right: 1px solid #0A246A;
  border-bottom: 1px solid #00b700;
  border-left: 1px solid #1a2129;
  font-size: 12px;
  font-weight: bold; }

3：伪类嵌套

伪类嵌套需要借助“&”符号一起配合使用
以clearfix为例

sass：

.clearfix{
  &:before,&:after{
    content:"";
    display:table;
  };
  &:after{
    clear:both;
    overflow:hidden;
  }
}
a{
  &:hover{
    color:red
  }
}

css：

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }
.clearfix:after {
  clear: both;
  overflow: hidden; }
a:hover {
  color: red; }