前言
前端开发中，CSS 样式是不可避免的。样式的写法多种多样，如何写出易维护、易扩展的样式呢？其中一种方案就是 BEM（Block Element Modifier）规范。本文主要介绍如何用 SASS 中的混合器来实现基于 BEM 规范的 CSS 样式。
BEM 规范
BEM 规范是一种命名规范，它将一个组件抽象为一个“块”（Block），将块中的元素抽象为“元素”（Element），将元素的修饰符抽象为“修饰符”（Modifier）。例如，一个视频播放器，可以把整个播放器看作是一个块，播放器中的播放按钮、暂停按钮、音量调节条等可以看作是元素，其中播放按钮按下后的样式、暂停按钮按下后的样式、音量调节条静音状态下的样式等可以看作是修改器。这样的规范使得 CSS 样式的命名更加规范、可读性更好，方便协作开发、维护和扩展。
SCSS 混合器
SCSS 是 Sass 的一种语法，允许用户使用 Sass 的一些高级功能，比如变量、嵌套、混合器等。SCSS 的混合器允许我们定义一个 CSS 样式组合，可以在需要的地方引用使用，实现 CSS 的代码复用。混合器可以带参数或不带参数，我们可根据具体情况来定义。
如何用混合器实现基于 BEM 规范的 CSS 样式
基于 BEM 规范的样式命名规则为 .block__element--modifier { }，在 SCSS 里，我们可以将其实现为一个混合器：
-- -------------------- ---- -------
------ ------------- --------- ----- ---------- ----- -
--- -------- -- ---- --- --------- -- ---- -
--------- -
---------
-
-
----- -- -------- -- ---- --- --------- -- ---- -
---------------------- -
---------
-
-
----- -- -------- -- ---- --- --------- -- ---- -
------------------------------------ -
---------
-
-
-这个混合器 b-e-m 接收三个参数 $block, $element, $modifier，其中 $element 和 $modifier 是可选参数，没有传值时默认值为 null。混合器根据参数判断出 .block、.block__element、.block__element--modifier 并为其设置样式。
我们可以通过下面的示例代码来理解如何使用：
-- -------------------- ---- -------
------- ----------------------
-------- --------------- -
-- ----
---------- -----
------ -----
----------------- -----
-
-------- --------------- ------- -
-- --------
--------- -
-------- ---
------ -----
------- -----
----------------- -------------------
-
-
-------- --------------- ------- --------- -
-- ---------
----------------- -----
------ -----
--------- -
------- ----------------
-
-这里我们定义了一个按钮 .button，并有一个带有图标的状态 .button__icon，还有一个被激活时的状态 .button__icon--active。使用混合器，我们可以用命名规范来定义 CSS 样式，实现代码的复用和可读性的提高。
总结
本文介绍了如何使用 SASS 中的混合器实现基于 BEM 规范的 CSS 样式，通过代码复用和命名规范提高了代码的可维护性和可读性。在实际开发中，我们可以根据具体情况，结合 BEM 规范和 SASS 的混合器，来实现更加易维护的 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb219b5ad90b6d041eea73