Question

我正在尝试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引用它，但我想回到祖母。我有什么方法可以使用吗？

谢谢

Answer 1

使用＆符号只查看那个特殊的父样式，这就是为什么你的SASS正在编译。

以下是两个选项：

    .icon-box {

        &__title {

            color: black;

        }

        &--red {

            color: red;

        }

        &__title {

            color: red;

        }
    }


   .icon-box {

        &__title {

            color: black;

        }

        &--red, &__title  {

            color: red;

        }
    }

Answer 2

最后，我想了很多，并找到了解决为什么没有办法在SCSS上选择祖父母的方法。

以下是我的表现

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

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

希望有人会发现它有用

如何在BEM修饰符中的SCSS上选择祖父？

2 个答案: