什么是 saladcss-bem？
saladcss-bem 是一个基于 BEM 命名规范的 CSS 预处理器库，它可以帮助我们更好地组织样式代码，避免样式冲突和提高代码可维护性。saladcss-bem 采用了类似于 Sass 的语法，并提供了丰富的功能和扩展。
如何安装和使用 saladcss-bem？
安装
在使用 saladcss-bem 之前，需要先安装 Node.js 和 npm。然后，在命令行中输入以下指令进行安装：
npm install saladcss-bem
使用
安装完成后，在你的项目中引入 saladcss-bem:
@import 'node_modules/saladcss-bem/saladcss-bem';
然后就可以开始使用 saladcss-bem 编写 BEM 样式了。以下是一个简单的示例：
-- -------------------- ---- -------
------ -
----------- -----
---------- -
------ -----
-
----------- -
----------- -----
-
-在这个示例中，.block 是一个块级元素，其下有一个元素 .block__element 和一个修饰符 .block--modifier。
saladcss-bem 的功能和扩展
功能
saladcss-bem 提供了一些内置的函数和变量，以及辅助类，可以帮助我们更好地组织代码。
变量
saladcss-bem 提供了两个变量 $bem-separator 和 $bem-modifier-separator，分别用于设置 BEM 命名规范中的分隔符和元素与修饰符之间的分隔符。例如：
-- -------------------- ---- -------
--------------- -----
------------------------ -----
------ -
----------- -----
---------- -
------ -----
-
----------- -
----------- -----
-
-以上示例中，将分隔符和元素与修饰符之间的分隔符分别设置为 __ 和 --，然后按照这个命名规范编写样式。
函数
saladcss-bem 还提供了一些函数，可以方便地处理 BEM 样式。
bem()
bem() 函数可以将一个块、元素或修饰符的名称转换成 BEM 命名规范。例如：
.bem(breadcrumb) => .breadcrumb {}
.bem(breadcrumb, item) => .breadcrumb__item {}
.bem(breadcrumb, item, active) => .breadcrumb__item--active {}e()
e() 函数可以将一个字符串转义，以防止出现特殊字符。例如：
content: e("« Back");m()
m() 函数用于创建一个修饰符类。例如：
-- -------------------- ---- -------
------ -
----------- -----
---------- -
------ -----
-
--------------- -
----------- -----
-
-以上示例中，使用 m() 函数创建了一个名为 .block--modifier 的修饰符类。
辅助类
saladcss-bem 还提供了一些辅助类，可以帮助我们更好地组织代码。
.block
.block 类用于表示一个块级元素。
.elem
.elem 类用于表示一个块级元素的子元素。
.mod
.mod 类用于表示一个元素或修饰符的集合。例如：
-- -------------------- ---- -------
------ -
---------- -
---------- -
----------- ----
-
------------ -
----------- ------
-
-
-在这个示例中，使用 .mod 类来表示
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43404