Question

我试图生成一些css，其目标是具有不同命名父级但通常命名为子级的元素。例如：

.icon-Part > .km-icon:before {
    content: "\e600";
}
.icon-Time > .km-icon:before {
    content: "\e601";
}
.icon-Error > .km-icon:before {
    content: "\e602";
}

显然，如果我的情况发生逆转，我的目标是产生css，其父母通常被命名，但孩子名字不同，我会做这样的事情：

.parent-class {
    > .child1-class {
       /* child1 specific styling */
    }
    > .child2-class {
       /* child2 specific styling */
    }
}

但我无法想到任何相反的做法。任何帮助将不胜感激。

Answer 1

见Parent Selectors。例如：

.km-icon:before {
    .icon-Part  > & {content: "\e600"}
    .icon-Time  > & {content: "\e601"}
    .icon-Error > & {content: "\e602"}
}

或者，您可以将复制的部分移动到mixin中，例如：

.icon(Part,  e600);
.icon(Time,  e601);
.icon(Error, e602);

.icon(@name, @char) {
    .icon-@{name} > 
        .km-icon:before {content: "\@{char}"}
}

（事实上，mixin方法更具前瞻性。）

嵌套对象的父级

1 个答案: