css - 具有 BEM 悬停状态的 SASS

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 文件抓取到其他项目，将父类的名称更改为我想要的任何内容并且可以使用。但是在悬停的这种情况下，如果不使用 &__header，我将无法到达 .card__header，所以如果我更改父类，我也需要更改悬停时的类。因为输出将是 .card__hasFullImage .card__hasFullImage__header 而我想要的是 .card__hasFullImage .card__header。有没有办法在不输入父类的情况下做到这一点？

标签： cssclasssasshoverbem

Answer 1

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

之前的 SCSS 目标类：悬停- 我有同样的问题