SASS 具有 BEM 悬停状态

Question

    .card {
      &__header {}

      &__title {}

      &__content {}

      &__hasFullImage {

        &:hover {
          &__header {}

          //I want something like this
          .card__header {}

          //and not to type the parent class
        }
      }
    }

所以我面临着使用 BEM 和 SASS 的情况，对我来说，这的全部意义在于我可以将我的 SCSS 文件抓取到其他项目更改父项目的名称 class 到我想要的任何东西，并且会工作。但是在悬停的这种情况下，如果不使用 &__header，我无法到达 .card__header，所以如果我更改父 class，我将需要更改 class也悬停。因为输出将是 .card__hasFullImage .card__hasFullImage__header 而我想要的是 .card__hasFullImage .card__header。有什么办法可以不输入父级 class?

Answer 1

.card {
  $this: &;
  
 &__hasFullImage {
   &:hover {
      #{$this}__header {}
    }
}

- 我有同样的问题

SASS 具有 BEM 悬停状态

SASS with BEM hover state

css

class

sass

hover

bem