css - 嵌套对象的父级

Question

我正在尝试生成一些 css，其目标元素具有不同名称的父项但具有通常命名的子项。例如:

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

显然，如果我的情况相反，我的目标是生成 parent 通常命名但 child 名字不同的 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"}
}

或者，您可以将复制的部分移动到混入中，例如:

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

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

(事实上，mixin 方法更适合 future 。)