简介
@troglotit/bem-sass-mixins 是一个为 Sass 提供 BEM (块、元素、修饰符) 命名规范的 mixin 库。通过使用这个库，可以更加方便地书写具有可维护性的的样式代码。
安装
该库需要使用 npm 进行安装。在终端中运行以下命令即可安装该库：
npm install @troglotit/bem-sass-mixins
使用方法
引入库
在 Sass 文件中引入该库：
@import "~@troglotit/bem-sass-mixins/mixins";
bookmark 格式示例代码
创建 BEM 类
-- -------------------- ---- ------- ------- -------- ------ ----------- -------- -------- ------------ -------- --------- - - -展开代码
按需引入
该库提供了按需引入的机制，方便使用者集成该库，减少冗余代码。示例代码如下：
@import "~@troglotit/bem-sass-mixins/mixins/block"; @import "~@troglotit/bem-sass-mixins/mixins/element"; @import "~@troglotit/bem-sass-mixins/mixins/modifier";
消除重复代码
通过引入该库，可以大大减少为了符合 BEM 命名规范而写的样式代码。我们可以这样创建一个父元素和子元素的样式：
.block{ background-color: #000; color: #fff; &__element{ text-decoration: underline; } }
通过 mixin，我们可以将其转变为：
-- -------------------- ---- ------- ------- -------- ------ ----------------- ----- ------ ----- ----------- -------- -------- ---------------- ---------- - -展开代码
总结
@troglotit/bem-sass-mixins 提供了一种方便的方式来遵循 BEM 命名规范，帮助我们更加高效地书写样式代码。对于长期使用 Sass 的前端开发者来说，该库是一种很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577181e8991b448d4709
