如何通过sass继承倍数类答案

【问题标题】：how to inheritance multiples class through sass如何通过sass继承倍数类
【发布时间】：2014-06-28 23:30:08
【问题描述】：

I have a scenario in sass
.A{
    background-color: red;
    Padding :20px;

    h4{ padding-bottom :20px;}
}
// another class

.B{ 
    background-color : blue; 
    padding : 20px

    h4{ padding-bottom:20px}

}

问题：如何在 SASS 中将 padding 和 h4 组合在一起而不重复 padding 和 h4 属性

【问题讨论】：

padding: 20px 包括 padding-bottom: 20px。 h4 声明是多余的。

标签： sass

【解决方案1】：

最直接的方法是使用@extend。

%common_properties {
    padding: 20px;

    h4 {
        padding-bottom: 20px;
    }
}

.a {
    @extend %common_properties; 
    background-color: red;
}

.b { 
    @extend %common_properties; 
    background-color: blue; 
}

【讨论】：

【解决方案2】：

使用 sass/scss 来处理这么小的冗余并不会节省太多

使用 scss 的解决方案：

  .a, .b {
    padding: 20px;
    background-color: red;
    & h4 {
      padding-bottom: 20px;
    }
  }
  .b{
    background-color:blue;
  }

纯 CSS 中的解决方案：

  .a, .b {
    padding: 20px;
    background-color: red;
  }
  .a h4, .b h4 {
    padding-bottom: 20px;
  }
  .b {
    background-color: blue;
  }

下面是它的样子： http://codepen.io/cawoelk/pen/Ciqyw

【讨论】：