简介
ember-cli-atomizer 是一个非常实用的 ember-cli add-on，它可以将模板中的样式和 HTML 元素进行分类，并且生成一个 Atomizer 配置文件，用于将这些分类的样式转换为一个 CSS 文件。这个过程通过 PostCSS 进行，因此也允许使用您最喜欢的 CSS 预处理程序。
安装
使用 npm 来进行安装：
--- ------- ---------- ------------------
使用
在 ember-cli 项目的根目录下，运行以下命令来创建一个 Atomizer 配置文件：
----- - ------------------
在成功创建配置文件之后，您将可以发现在项目根目录下多出了一个名为 atomizer-config.js 的文件。
在此之后，您可以使用以下命令来将您的模板转换为一个 CSS 文件：
----- --------
配置文件
Atomizer 配置文件是一个用于 Atomizer 的 JSON 配置文件。您可以自己编写配置文件，但是比较推荐的方式是使用 ember-cli-atomizer 来自动生成一个基本配置文件。
您可以通过以下命令来自动生成一个基本的 Atomizer 配置文件：
----- - ---------------
此命令将在您的源代码目录下创建一个名为 build-config/atomizer.json 的文件。
配置说明
以下是 Atomizer 配置文件的一些重要说明：
classNames: 这是一个对象，用于指定您项目中的所有类名。这些类名将在 Atomizer 中被分类，并且用于后续生成 CSS。breakPoints: 这是一个对象，指定您项目中的所有断点。这些断点将用于 Atomic 类名之间的惰性和默认样式。classNamesBlacklist: 一个对象或一个数组。将这些类名从生成的 CSS 文件中排除。这在您需要使用外部样式（例如，引入第三方库）时是非常有用的。combinators: 这是一个对象，用于指定 Atomizer 在转换期间使用的组合器。默认的组合器包括~、+、>和custom": {}: 这是一个对象，用于添加您自己的 Atomizer 原子规则或者修改默认规则。
示例
以下是一个基本应用的示例：
安装
--- ------- ---------- ------------------ ----- - ------------------ ----- - ---------------
基本配置
以下是一个简单的配置文件，用于将 bg-red 类名编译为一个具有 background: red 样式的 css 规则：
-- --------------------------
-
------------- -
--------- ------------ ----
-
-这个配置文件将会被用来生成一个 CSS 文件：
------- ------------ ----
使用组合器
如果您的选择器需要使用组合器，您需要在 combinators 对象中指定：
-- --------------------------
-
------------- -
------ ------- -----
------ ------------ ------
---- - ----- -
-------- --------
------------- ------
--
---- - ----- -
-------- ----------
------------- ------
-
--
-------------- -
---- - - --
---- - - -
--
-这个配置文件将编译为以下 CSS：
---- ------- ---- ---- ------------ ----- ---- - ---- ------- ----------------- ----- ---- - ---- ------- ------------------- -----
结论
ember-cli-atomizer 为我们提供了一种便捷和高效的方式来分类和组织样式类名。无论是大型的还是小型的 Web 项目，都能够轻松地使用它。传统的 CSS 架构面临混乱和难与维护的问题，而 Atomizer 能够解决这些问题，并能够让我们的 CSS 代码更具有可读性和可维护性。
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f77238a385564ab6911