scss学习（一）

1. 嵌套

body{
  div{
    border:1px solid red
  }
}

等价于

body div{
  border 1px solid red
}

2. 声明变量

$black:black;
body{
  div{
    border:1px solid $black
  }
}

可以通过只改变$black的样式来改变引用该样式选择器的样式

3. @mixin

@mixin box{
  border:1px solid red;
  background-color:#ddd
}
body{
  div{
    @include box
  }
}
body{
  footer{
    @include box
  }
}

优点：减少代码量
缺点：实际（浏览器加载）代码量并未改变，@include相当于直接将代码copy下来
4.placeholder

%box{
  border:1px solid red;
  background-color:#ddd
}
body{
  div{
    @extend box
  }
}
body{
  footer{
    @extend box
  }
}

真实减少代码量
通过并行选择器来进行样式的复用