SASS中的BEM语法

Question

我有一个带有BEM的简单HTML和CSS。我想要在类 .block__item-header--has-round 内的类 .block__item-header-mark 的样式。 我使用CSS .block__item-header--具有圆形.block__item-header-mark {/ 此处样式 /} 。但是我认为这不是很好的语法。

我的问题是：

1. 如何在.block__item-header中调用.block__item-header-mark-在我的SCSS代码中具有更好的语法？
2. 我的BEM语法很好吗？

代码

.block {
  &__item {
    &-header {
      &--has-round {
        /* How to call .block__item-header-mark with better syntax ??? */
        .block__item-header-mark {
          /*overide style*/
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}

<div class="block">
  <div class="block__item">
    <div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
    <div class="block__item-body"></div>
  </div>
</div>

Answer 1

您可以创建一个变量以引用您想要的作用域

.block {
  &__item {
    &-header {
      $header: &;
      &--has-round {
        #{ header }-mark {
          /* override style */
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}