BEM (块，元素，修饰符) 是一种流行的 CSS 架构方法，它通过描述 HTML 中的块，元素和修饰符之间的关系来创建可重用的组件库。BEMJSON-To-SCSS 是一个方便的 npm 包，可以自动将 BEMJSON 转换为 SCSS 文件，为前端开发人员节省大量时间和工作量。
何为 BEMJSON？
BEMJSON 是一种用于描述 BEM 架构的 JSON 对象。BEMJSON 目的在于为 HTML 元素提供一个更加抽象化的等效实现，并以格式化的形式呈现出来。一个 BEMJSON 对象大致像这样：
-- -------------------- ---- -------
-
------ -----------
---- -
------- ---------- ----- ----------
------- -----------
------ --------- ----- --------- -------- -------- ---------
--
----- ----------
----- -
-------- --------
-------- -------
--
-------- -----
-开始使用 bemjson-to-scss
bemjson-to-scss 是一个简洁易用的 npm 包，您可以通过以下步骤快速使用它：
- 以新建一个项目为例，使用 npm 在终端中安装 bemjson-to-scss：
npm install bemjson-to-scss - 创建一个文件夹，用于存放您的 BEMJSON 文件和转换后的 SCSS 文件。
- 在文件夹中创建一个名为
bemjson.js的 BEMJSON 文件，并用您自己的 JSON 对象替换示例占位符：
-- -------------------- ---- -------
-------------- - -
------ -----------
---- -
------- ---------- ----- ----------
------- -----------
------ --------- ----- --------- -------- -------- ---------
--
----- ----------
----- -
-------- --------
-------- -------
--
-------- -----
-- 在终端中运行
bemjson-to-scss bemjson.js命令，可以将上一步中创建的bemjson.js文件转换为相应的 SCSS 文件。 您可以使用以下命令格式进行更具体的配置：
bemjson-to-scss --input /path/to/bemjson/file.js --output /path/to/scss/file.scss
如何使用转换后的 SCSS 文件
转换后的 SCSS 文件包含了您在 BEMJSON 文件中定义的所有块，元素和修饰符的样式。 您可以像使用任何其他 SCSS 文件一样使用它们。
以下是一个使用 BEMJSON 转换文件的示例。 如果您的 BEMJSON 文件定义了一个名为“my-block”的块：
- 引入您的转换后的 SCSS 文件：
@import "my-block.scss"; - 在 HTML 文件中使用该块：
<div class="my-block"></div>
这将使得在预处理器中处理出相应的 CSS 来进行页面修饰。
结论
BEMJSON-To-SCSS 是一个非常有用的 npm 包，它能够有效地减少 CSS 编码的工作量，从而使得前端开发人员的生产率更高。 通过学习本文，您已经掌握了使用 bemjson-to-scss 的方法，希望它能帮助您节省时间和提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566aa81e8991b448e2e3b