css - 更少的父选择器

通常较少引用父选择器：

.parent {
    .grand-pa & {
       /* this rules will apply to: .grand-pa .parent {....}
       background: grey;
    }
}

我想做的是类似的事情。 HTML的示例代码：

    <div class="panel panel-parent">
        <div class="panel-child">
            {{content}}
        </div>
    </div>

更少的代码：

.panel {
    .panel-child {
        // some rules
        &.panel-parent & {  //<=== IS IT POSSIBILE SOMETHING LIKE THIS??
            // .panel.panel-parent .panel-child{...}
        }
    }
}

我发现的唯一解决方案是重复.panel-child：

.panel {
        &.panel-parent .panel-child {  //<=== Workaround
            // .panel.panel-parent .panel-child{...}
        }
        .panel-child {
        // some rules
        }
    }
}

最佳答案

相同元素的类顺序实际上并不重要，即.panel.panel-parent等于.panel-parent.panel（两者都将匹配<div class="panel panel-parent">），因此，您可以通过以下方式获得所需的内容：

.panel {
    .panel-child {
        a: a;
        .panel-parent& {
            b: b;
        }
    }
}

代替。

关于css - 更少的父选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29843806/

Panel

css - 更少的父选择器