html - SASS 中的 BEM 语法

Question

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

我的问题是:

1. 如何在我的 SCSS 代码中使用更好的语法在 .block__item-header--has-round 中调用 .block__item-header-mark？
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*/
      }
    }
  }
}