<分区>
标签 css sass css-selectors
我有一个如下所示的 CSS 样式表
.icon1 {
&:after {
content:"";
float: right;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #4ac102;
display: block;
position: relative;
}
}
.icon2 {
&:after {
content:"";
float: right;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #f1342f;
display: block;
position: relative;
}
}
.icon3 {
&:after {
content:"";
float: right;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #616a83;
display: block;
position: relative;
}
}
如您所见，除了背景颜色外，其他所有属性都是相同的。我可以重构此代码以使其变干吗？
最佳答案
您可以使用 Extend/Inheritance为此:
.icons {
content:"";
float: right;
width: 8px;
height: 8px;
border-radius: 100%;
display: block;
position: relative;
}
.icon1 {
&:after {
@extend .icons;
background-color: #4ac102;
}
}
.icon2 {
&:after {
@extend .icons;
background-color: #f1342f;
}
}
.icon3 {
&:after {
@extend .icons;
background-color: #616a83;
}
}
关于css - 如何在 css( sass ) 中重用通用的 css 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38463252/