sass-@extend继承

子节点可以用@extend将公用的代码继承

占位符以%开头 使用时才会编译 并且只用于扩展选择器

.alert{
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important{
    color: red;
}

%item{
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
//如果不希望.alert也声明 可以使用占位符 占位符不会声明
.alert-info{
    // @extend .alert;
    @extend %item;
    @extend .important;   //多继承

    color: #31708f;
    background-color: #d9e7d9;
    border-color: #bce8f1;
}

.alert-success{
    // @extend .alert;
    @extend %item;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{

    @extend .alert;   //使用正常继承
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
 
    @extend .alert;   //使用正常继承
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

生成css - 使用占位符可将共有代码共同声明

.alert, .alert-danger, .alert-warning {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.important, .alert-info {
  color: red;
}

.alert-success, .alert-info {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-info {
  color: #31708f;
  background-color: #d9e7d9;
  border-color: #bce8f1;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}/*# sourceMappingURL=extend继承.css.map */

对比占位符以及正常继承

/* 正常继承生成的代码 */
.alert, .alert-danger, .alert-warning {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

/* 占位符 */
.alert-success, .alert-info {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

/*
    使用占位符不会有%item 而正常继承会有.alert
    但是实际使用时 公共标签(这里的.alert)一般是不使用的 所以声明没有必要
    因此%item 占位符可以节省此操作
*/