更少的继承不起作用
Less inheritance doesn't work
你好,你能检查一下下面的代码吗?我想为 class 定义一些样式,然后为另一个 class 应用相同的样式。我为此使用了继承,但未使用来自父级的样式:
.parent-item {
&:not(:last-child) {
margin-right: 20px;
}
}
.child-item {
&:extend(.parent-item);
//...
}
只需在 class
的名称旁边添加单词 all
.child-item {
&:extend(.parent-item all);
//...
}
例如
.parent-item {
color: green;
background: red;
&:not(:last-child) {
margin-right: 20px;
}
&:last-child {
color: red;
}
&:hover {
color: red;
}
}
.child-item {
&:extend(.parent-item all);
//...
}
结果将是
.parent-item,
.child-item {
color: green;
background: red;
}
.parent-item:not(:last-child),
.child-item:not(:last-child) {
margin-right: 20px;
}
.parent-item:last-child,
.child-item:last-child {
color: red;
}
.parent-item:hover,
.child-item:hover {
color: red;
}
你好,你能检查一下下面的代码吗?我想为 class 定义一些样式,然后为另一个 class 应用相同的样式。我为此使用了继承,但未使用来自父级的样式:
.parent-item {
&:not(:last-child) {
margin-right: 20px;
}
}
.child-item {
&:extend(.parent-item);
//...
}
只需在 class
的名称旁边添加单词 all.child-item {
&:extend(.parent-item all);
//...
}
例如
.parent-item {
color: green;
background: red;
&:not(:last-child) {
margin-right: 20px;
}
&:last-child {
color: red;
}
&:hover {
color: red;
}
}
.child-item {
&:extend(.parent-item all);
//...
}
结果将是
.parent-item,
.child-item {
color: green;
background: red;
}
.parent-item:not(:last-child),
.child-item:not(:last-child) {
margin-right: 20px;
}
.parent-item:last-child,
.child-item:last-child {
color: red;
}
.parent-item:hover,
.child-item:hover {
color: red;
}