SCSS + BEM风格的子结构，当父代有变化 [英] SCSS + BEM style children structure when parent has modificator

问题描述

可以设置scss为元素里面--rounded？我不想使用.box__something，但我需要修改依赖父修饰符的孩子

 < div class = box> 
< div class =box__something> Hello< / div> 
< / div> 
< div class =box box  -  rounded> 
< div class =box__something> Hi< / div> 
< / div> 
 
 .box {
& __ something {
 background：blue; 
} 
&  -  rounded {
 background：green; 
 
 .box__something {//<<<是更好的选择器吗？ 
 background：pink; 
} 
} 
} 
  

解决方案>

Sass没有任何伟大的内置解决方案来解决你的问题，这是一个已经探讨了很多次的问题。然而，您可以通过使用& 帮助来加入您希望加入的类，以略微不优雅的方式获得结果。我在此添加了一个实时示例。

虽然这样做是有效的，你必须意识到，如果你想直接定义 .box - rounded 类的样式，你必须在它自己的类中，如下图所示，你不能使用我们放置& __ something 的尾随& 类。

我建议你用我的sassmeister gist来玩，看看你能得出什么结果。

  .box {
& __ something {
 background：blue; 
} 
&  -  rounded {
 background：green; 
} 
&  -  rounded& {
& __ something {
 background：pink; 
} 
} 
} 
  

Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier

<div class="box">
    <div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
    <div class="box__something">Hi</div>
</div>

.box {
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        .box__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

解决方案

Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the result you are after in a slightly un-elegant manner by using the & helper to join the classes that you wish to join. I have included a live example here.

While this does work, you must realise that if you want to style the .box--rounded class directly you must have it inside it's own class as illustrated below, you cannot use it with the trailing & class that we have placed &__something on.

I recommend you play around with my sassmeister gist and see what results you can come up with.

.box {
    &__something {
      background: blue;
    }
    &--rounded {
      background: green;
    }
    &--rounded & {
      &__something {
        background: pink;
    }
  }
}

I hope this has solved your issue.

这篇关于SCSS + BEM风格的子结构，当父代有变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！