如何在 BEM 修饰符内的 SCSS 上 select grand parent？

Question

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

这是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 但我想回到 grand parent。有什么方法可以使用吗？

谢谢

Answer 1

最后，我想了很多，找到了一个解决方法，不知道为什么没有办法在 SCSS 上 select grandparent。

我是这样做的

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

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

希望有人会觉得有用

Answer 2

使用 & 符号只会查看特定样式的父项，因此您的 SASS 会像那样编译。

这里有两个选项供您选择：

    .icon-box {

        &__title {

            color: black;

        }

        &--red {

            color: red;

        }

        &__title {

            color: red;

        }
    }


   .icon-box {

        &__title {

            color: black;

        }

        &--red, &__title  {

            color: red;

        }
    }

如何在 BEM 修饰符内的 SCSS 上 select grand parent？

How to select grand parent on SCSS inside BEM modifier?

sass

nested

modifier

bem