更少的父选择器 [英] parent selector in less

问题描述

通常较少引用父选择器的是:

Normally in less to reference a parent selector is:

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

我想要做的是类似的事情. HTML的示例代码:

What I'm trying to do is something similar. example code 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:

The only solution I have found is to repeat .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">)，因此您只需使用即可获得所需的东西:

The order of classes of the same element does not actually matter, i.e. .panel.panel-parent is equal to .panel-parent.panel (both will match <div class="panel panel-parent">), thus you can get what you need with just:

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

相反.

这篇关于更少的父选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！