弹簧

SCSS (ass) 帮助建立严格的 贝姆 选择者.

安装和使用

npm install --save-dev @bbt/bem

样式表的用法 :

@use '@bbt/bem';

.my-block {
  // block styles

  @include element('my-element') {
    // element styles

    @include modifier('my-modifier') {
      // modifier styles
    }
  }

  @include modifier('my-block-modifier') {
    // block modifier styles

    @include element('my-element') {
      // block modifier element styles

      @include modifier('my-modifier') {
        // block modifier element modifier styles
      }
    }
  }
}

生产CSS如:

.my-block {
  // block styles
}

.my-block .my-block__element {
  // element styles
}

.my-block .my-block__element.my-block__element--my-modifier {
  // modifier styles
}

.my-block.my-block--my-block-modifier {
  // block modifier styles
}

.my-block.my-block--my-block-modifier .my-block__my-element {
  // block modifier element styles
}

.my-block.my-block--my-block-modifier
.my-block__my-element.my-block__my-element--my-modifier {
  // block modifier element modifier styles
}