如何在 BEM 修饰符内的 SCSS 上选择祖父母？答案

【问题标题】：How to select grand parent on SCSS inside BEM modifier?如何在 BEM 修饰符内的 SCSS 上选择祖父母？
【发布时间】：2017-04-30 19:14:39
【问题描述】：

当我尝试 BEM 和 SCSS 时。使用 SCSS 选择修饰符和元素很容易，但困难的部分是在使用修饰符和引用没有修饰符类的元素时破坏了我所做的简洁方法。这是我正在尝试做的快速示例。

这是 HTML

<div class="icon-box icon-box--red">
   <h3 class="icon-box__title>This is title</h3>
</div>

还有 SCSS

.icon-box {
  &__title {
    color: black;
  }

  &--red {
    &__title {
      color: red;
    }
  }
}

输出的css是

.icon-box {
   background: white;
}
.icon-box__title {
  color: black;
}
.icon-box--red {
  background: black;
}
.icon-box--red__title {
  color: red;
}

编译后的 CSS 是正确的，但我想实现这一点

.icon-box {
   background: white;
}
.icon-box__title {
  color: black;
}
.icon-box--red {
  background: black;
}
.icon-box--red .icon-box__title {
  color: red;
}

虽然我可以使用名称 .icon-box__title 来引用它，但我想回到祖父母那里。有什么方法可以使用吗？

谢谢

【问题讨论】：

标签： sass nested modifier bem

【解决方案1】：

使用 & 符号只会查看特定样式的父级，因此为什么您的 SASS 会这样编译。

这里有两个选择：

    .icon-box {

        &__title {

            color: black;

        }

        &--red {

            color: red;

        }

        &__title {

            color: red;

        }
    }


   .icon-box {

        &__title {

            color: black;

        }

        &--red, &__title  {

            color: red;

        }
    }

【讨论】：

就像我已经说过的，我想选择祖父母。这是 SASS 的已知问题。谢谢

【解决方案2】：

最后，我想了很多，找到了一种方法，不确定为什么没有办法在 SCSS 上选择祖父母。

这就是我的做法

.icon-box {
  &__title {
    color: black;
  }

  &--red {
    .icon-box {
      &__title {
        color: red;
     }
  }
}

希望有人会觉得有用

【讨论】：

这与上面的答案几乎相同。您能否接受以上答案作为正确答案，或者选择您的答案作为正确答案。