如何通过sass继承多个类
问题:如何在SASS中将padding和h4组合在一起而不重复padding和h4属性最直接的方法是使用如何通过sass继承多个类,sass,Sass,问题:如何在SASS中将padding和h4组合在一起而不重复padding和h4属性最直接的方法是使用@extend 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{
@extend
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/SCS来实现这一小部分冗余,确实节省不了多少钱 使用scss的解决方案:
%common_properties {
padding: 20px;
h4 {
padding-bottom: 20px;
}
}
.a {
@extend %common_properties;
background-color: red;
}
.b {
@extend %common_properties;
background-color: blue;
}
简单css中的解决方案:
.a, .b {
padding: 20px;
background-color: red;
& h4 {
padding-bottom: 20px;
}
}
.b{
background-color:blue;
}
下面是它的样子:
填充:20px
包括填充底部:20px
。h4
声明是冗余的。
.a, .b {
padding: 20px;
background-color: red;
}
.a h4, .b h4 {
padding-bottom: 20px;
}
.b {
background-color: blue;
}