Sass扩展/继承@extend

% 占位符，%xx{}声明的代码，如果不被 @extend 调用的话，不会被编译

//.scss
%mt5 {
  margin-top: 5px;
}
%pt5{ //不会被编译，因为没有被调用
  padding-top: 5px;
}
.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
    @extend %mt5 ;
  }

//.css
.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; 
}
.btn-primary {
 margin-top: 5px;
}
.btn-primary {
  background-color: #f36;
  color: #fff; 
}