10：sass中继承的使用

sass中继承的使用

继承是通过关键词@extend来继承已存在的样式代码块，从而实现代码的继承

sass

.btn{
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary{
  background-color: #0ff;
  color: #fff;
  @extend .btn
}
.btn-second{
  background-color: #f00;
  color: #fff;
  @extend .btn
}

css：

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary {
  background-color: #0ff;
  color: #fff; }

.btn-second {
  background-color: #f00;
  color: #fff; }

继承的好处：

生成的css文件中对重用模块可以复用，不会形成冗余代码

sass：

.left{
  float: left;
  margin-left: 10px;
}
.box{
  @extend .left;
}
.nav{
  @extend .left;
}

css：

.left, .box, .nav {
  float: left;
  margin-left: 10px; }