如何使 css 子类继承父 css 类

Question

>我需要子 css 类从其父 css 类继承属性

.avatar {
min-width: 35px;
max-width: 35px;
height: 35px;
flex: 1 1 35px;
&--home {
margin: 10px;
}
&--post {
margin: 0px 17px 0px 4px;
}
}

我需要将父类和 margin：10px; 应用于具有头像的元素 - 像这样的家庭类：

<div class="avatar--home"></div>

这仅应用margin: 10px;并忽略父属性

Answer 1

预处理程序的&符号复制父级的名称，而不是复制其属性。

但是，如果你想扩展你的类，你可以使用@extendmixin(用于SASS)和:extend(...)(用于LESS)。

/* SASS */
.avatar {
min-width: 35px;
max-width: 35px;
height: 35px;
flex: 1 1 35px;

&--home {
@extend .avatar;
margin: 10px;
}
}
/* LESS */
.avatar {
min-width: 35px;
max-width: 35px;
height: 35px;
flex: 1 1 35px;

&--home:extend(.avatar) {
margin: 10px;
}
}

其他链接：

• 是否可以将父属性包含在扩展的 Sass 类中？
• LESS是否有"扩展"功能？

或者您可以按照@howtopythonpls建议进行操作，只需添加修饰符类(因为您使用的是 BEM 方法)。

希望这有帮助！

Answer 2

您不能也添加头像类：

<div class="avatar avatar--home"></div>

否则，我认为您将不得不再次定义所有属性并将它们设置为inherit，如评论中所述。