SCSS嵌套语法：巢父母毗

类

我想输出： .selector.another-selector .selector__block{some declaration} ，但我想窝吧：
我使用&末，所以我可以嵌套其下__block，但我怎样才能使它与.selector相邻？
代码示例：SCSS嵌套语法：巢父母毗

.selector{ 
    &__block{ 
    // i want to put my .another-selector declaration here 
    .another-selector &{ 
    //syntax issue 
    //need to make it .selector.another-selector .selector__block 
    } 
}

在此先感谢。

来源

2017-07-18 Yonatan Lev Ari

如果您嵌套您的选择器，那么它必须位于.selector__block上下文中（&）。

你有2个解决方案，在这里：

您可以重复第一选择，因为这样的：

.selector { 
    &__block { 
     ... 
     .another-selector.selector & { 
      // Here `&` means `.selector__block` 
     } 
    } 
}

可以嵌套不同：

.selector { 
    &__block { 
    ... 
    } 
    &.another-selector &__block { 
    // Here `&` means `.selector` 
    } 
}

也许第二个解决方案是因为更好它尊重inception rule并且更少依赖于DOM结构。

顺便说一句，你也可以尝试https://www.sassmeister.com/你选择

来源

2017-07-18 09:09:35 Tibo

由于某种原因，这个投票得票？我同意Tibo（解决方案2） - 不要过分复杂的东西 –

嵌套BEM通常是过于复杂的事情。如果你需要声明'＆.another-selector＆__ block'，那么解决方案二是一个很好的解决方案，如果你有一个真正的项目被维护而不是一个hello世界，那么不是那么简单吗？ –

这是一个维护任务。不能重新编写代码。只是想组织它。无论如何，这个解决方案是好的，经过一番思考，我同意在这里嵌套太多是不好的。谢谢 –

打，我建议你不要窝在BEM所有。只是为了两个有效的原因与简单的声明。

1）错误跟踪嵌套的BEM很难，假设你从devtools获得一个类，它是.hero__heading。在执行搜索时，这不会匹配代码中的任何内容。现在上面的例子不难搞清楚，但是继承一个嵌套结构的项目是一件痛苦的事情。 我建议阅读Harry Roberts article on code smells in css

2）像这样的嵌套往往会复杂，当想要覆盖其他类像你的情况。

考虑以下代码：

.selector { 
    background-color: deepskyblue; 
} 

.selector__block { 
    color: lightblue; 

    .another-selector & { 
    color: lightcoral; 
    } 
}

来源

2017-07-18 09:22:02

@ Dejan.S我不是BEM的大风扇（但这是另一个咆哮;-)。然而，如果你正在使用BEM我觉得嵌套将有助于说明层次和期待什么

SCSS：

.selector { 
    // selector styles 
    color: red; 

    // default selector block style 
    &__block { color: green; } 

    // selector variant selector block styles 
    &.foo &__block { color: blue; } 
    &.bar &__block { color: yellow; } 
}

CSS输出：

.selector { color: red; } 
.selector__block { color: green; } 
.selector.foo .selector__block { color: blue; } 
.selector.bar .selector__block { color: yellow; }

HTML：

<div class="selector"> 
    Selector <!-- red --> 
</div> 
<div class="selector"> 
    Selector <!-- red --> 
    <div class="selector__block"> 
     Selector Block <!-- green --> 
    </div> 
</div> 
<div class="selector foo"> 
    Selector <!-- red --> 
    <div class="selector__block"> 
     Selector Foo Block <!-- blue --> 
    </div> 
</div> 
<div class="selector bar"> 
    Selector <!-- red --> 
    <div class="selector__block"> 
     Selector Bar Block <!-- yellow --> 
    </div> 
</div>

来源

2017-07-18 10:12:00

SCSS嵌套语法：巢父母毗

回答

相关问题