基本sass，如何继承嵌套类中的属性

Question

我正在将一个项目从CSS重写为SCSS，重构时遇到了问题。

我的代码转换为：

.flex {
display: flex !important;
&-down {
display: flex !important;
align-items: flex-end;
}
&-center {
display: flex !important;
justify-content: center !important;
align-items: center;
}
&-center-left {
display: flex !important;
align-items: center;
}
&-evenly {
display: flex !important;
justify-content: space-evenly !important;
}
&-around {
display: flex !important;
justify-content: space-around !important;
}
&-between {
display: flex !important;
justify-content: space-between !important;
}
&-column {
display: flex !important;
align-items: flex-start !important;
align-content: center !important;
flex-direction: column !important;
text-align: center;
justify-content: center;
}
}

正如你所看到的，我一直在重复属性display: flex !important;既然我把它声明为容器类.flex的第一条指令，那么嵌套类有没有办法以一种不那么冗长、更优雅的方式获得该属性？因为我不认为不断重复display: flex !important;或display: inherit !important;有什么意义，而且我也不这么做，所以CSS中的结果类不会有这个属性。

提前感谢！

Answer 1

如果您不需要在另一个中添加任何内容，您仍然可以将其设置为：

.flex {
display: flex !important;
&-down, &-center, &-center-left, &-evenly, &-around, &-between, &-column{
display: flex !important;
}
&-down {
align-items: flex-end;
}
&-center {
justify-content: center !important;
align-items: center;
&-left {
align-items: center;
}
}
&-evenly {
justify-content: space-evenly !important;
}
&-around {
justify-content: space-around !important;
}
&-between {
justify-content: space-between !important;
}
&-column {
align-items: flex-start !important;
align-content: center !important;
flex-direction: column !important;
text-align: center;
justify-content: center;
}
}

Answer 2

方法1-@mixin和@include

Mixin允许您定义可以在整个样式表中重复使用的样式。

示例：-

@mixin flexbox
{
display:-webkit-box; // old
display:-moz-box; // old
display:-ms-flexbox; // ie
display:-webkit-flex; // new
display:flex; // new
}
div {
@include flexbox();
}

方法2:-您可以使用逗号分隔相同属性的多个CSS声明：

.flex {
display: flex !important;
&-down, &-center, &-center-left, &-evenly, &-around, &-between, &-column{
display: flex !important;
}