SASS 中的 BEM 语法

Question

我有一个简单的 HTML 和 CSS 与 BEM。我想要 class .block__item-header-mark 内 class .block__item-header--has-round 的样式。我在这里使用 CSS .block__item-header--has-round .block__item-header-mark { /样式/ }。但我不认为这是好的语法。

我的问题是：

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

SASS 中的 BEM 语法

BEM syntax in SASS

html

css

sass

bem

代码