sass-bem

使用 sass 编写 bem 风格的css。

声明

该方案是 element-ui 框架中的，本人只是根据实践经验对此进行了一些修改。

推荐

• emmet: https://docs.emmet.io/filters/bem/

configs

自定义可参考 sass 变量声明语法。

| config | 含义 | 默认值 | | ------------------- | ---------------------- | ------ | | $namespace | class 前缀（命名空间） | app | | $block-separator | Block 分隔符 | - | | $element-separator | Element 分隔符 | -- | | $modifier-separator | Modifier 分隔符 | __ | | $state-prefix | 状态样式前缀 | is- |

mixins

| mixin | 含义 | | ------------- | ------------------- | | b | BEM 中的 Block | | e | BEM 中的 Element | | m | BEM 中的 Modifier | | spec-selector | 用于自定义嵌套样式 | | when | 定义一个状态样式 |

使用

手动引入

1. 安装：npm install sass-bem -D
2. 使用

/* demo.scss */

@import 'sass-bem/index.scss';

@include b(demo){
  /* rules */
  @include e(tip){
      /* rules */
  }
  ...
}

webpack

在任何一个 sass 文件中都可使用 bem.scss 中的 mixin

1. 安装：npm install sass-bem -D
2. 安装: npm install sass-resources-loader -D
3. 配置 sass-resources-loader:

module.exports = {
  // ....
  module: {
    rules: [
      // ....
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-resources-loader',
            options: {
              sourceMap: true,
              resources: [
                '~sass-bem/index.scss'
              ]
            }
          }
        ]
      }
    ],
  }
};

vue 项目： vue-demo

angular 项目 angular-demo