在前端开发中，使用 Sass 预处理器可以大大提高 CSS 编写效率和代码可维护性，但是也给命名带来了困扰。为了规范命名和提高代码可读性，我们引入了 BEM 命名规范、命名空间等，这些都需要写很长的前缀。为了方便使用，我们可以使用 npm 包 sass-prefix-mixins，本文将介绍如何使用该插件。
什么是 sass-prefix-mixins
sass-prefix-mixins 是一个 Sass 函数库，提供了一系列的 Sass mixin 来增加特定的前缀，例如：
prefix-block表示添加 block 前缀；prefix-element表示添加 element 前缀；prefix-modifier表示添加 modifier 前缀。
安装和使用
使用 sass-prefix-mixins 前先安装：
npm install sass-prefix-mixins --save-dev
然后在 Sass 文件中导入：
@import '~sass-prefix-mixins/prefix-mixins';
这样就可以使用里面提供的所有 mixin。
例如，在写 BEM 的 class 名称时，使用 prefix-block 来添加 .block- 的前缀：
-- -------------------- ---- -------
-------- ---------------------------- -
-------- -
---------- -----
--------- -
------ -----
-
-
------------- -
---------- -----
-
-这样会生成以下 CSS：
-- -------------------- ---- ------- -------------------- - ---------- ----- - ---------------------------- - ------ ----- - ------------------------- - ---------- ----- -
在上面的例子中，根据 BEM 命名规范，BEM block 名称应该以 .block- 的前缀开始，使用 sass-prefix-mixins 可以很方便地添加类似的前缀。
同时，sass-prefix-mixins 还提供了其他的 mixin，例如 prefix-State（添加状态前缀）、prefix-Namespace（添加命名空间前缀）等，使用方法类似。
总结
使用 sass-prefix-mixins 可以方便地添加 BEM、命名空间等前缀，可以提高代码规范性和可读性。在项目中使用 Sass 时，推荐使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd781e8991b448dd633