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