DRY我不想用::after重复这个CSS代码

Question

我写的代码运行得很好，但我不想重复scss代码，我试过了，但到目前为止没有成功：

item { <--css class
width: 100px;
}
&-firstchild {<--first child of "item" class
&::after{
width: 60px;
content: '';
display: block;
margin-left: 20px;
border-bottom: 2px solid $ea-color-red-base;
} 
&-secondchild{<--second child of "item" class
&::after{
width: 60px;
content: '';
display: block;
margin-left: 20px;
border-bottom: 2px solid $ea-color-blue-base;
}

这是中所有儿童的常见scs：

width: 60px;
content: '';
display: block;
margin-left: 20px;

我想把它分组，不再重复，因为我有几个孩子。

我能做什么？

Answer 1

如果不想重复选择器，可以使用@extend规则和占位符选择器：

%childStyles {
width: 60px;
content: '';
display: block;
margin-left: 20px;
}
.item {
width: 100px;

&-firstchild {
&::after {
@extend %childStyles;
border-bottom: 2px solid $ea-color-red-base;
} 
}
&-secondchild {
&::after {
@extend %childStyles;
border-bottom: 2px solid $ea-color-blue-base;
}
}
}

扩展样式将编译为：

.item-secondchild::after, .item-firstchild::after {
width: 60px;
content: "";
display: block;
margin-left: 20px;
}

Answer 2

试试这个：

.item {
width: 100px;
&-firstchild, &-secondchild {
&::after{
width: 60px;
content: '';
display: block;
margin-left: 20px;
}
}
&-firstchild::after {
border-bottom: 2px solid $ea-color-red-base;
}
&-secondchild::after {
border-bottom: 2px solid $ea-color-blue-base;
}
}