npm 包：ember-cli-atomizer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

ember-cli-atomizer 是一个非常实用的 ember-cli add-on，它可以将模板中的样式和 HTML 元素进行分类，并且生成一个 Atomizer 配置文件，用于将这些分类的样式转换为一个 CSS 文件。这个过程通过 PostCSS 进行，因此也允许使用您最喜欢的 CSS 预处理程序。

安装

使用 npm 来进行安装：

npm install --save-dev ember-cli-atomizer

使用

在 ember-cli 项目的根目录下，运行以下命令来创建一个 Atomizer 配置文件：

ember g ember-cli-atomizer

在成功创建配置文件之后，您将可以发现在项目根目录下多出了一个名为 atomizer-config.js 的文件。

在此之后，您可以使用以下命令来将您的模板转换为一个 CSS 文件：

ember atomizer

配置文件

Atomizer 配置文件是一个用于 Atomizer 的 JSON 配置文件。您可以自己编写配置文件，但是比较推荐的方式是使用 ember-cli-atomizer 来自动生成一个基本配置文件。

您可以通过以下命令来自动生成一个基本的 Atomizer 配置文件：

ember g atomizer-config

此命令将在您的源代码目录下创建一个名为 build-config/atomizer.json 的文件。

配置说明

以下是 Atomizer 配置文件的一些重要说明：

classNames: 这是一个对象，用于指定您项目中的所有类名。这些类名将在 Atomizer 中被分类，并且用于后续生成 CSS。
breakPoints: 这是一个对象，指定您项目中的所有断点。这些断点将用于 Atomic 类名之间的惰性和默认样式。
classNamesBlacklist: 一个对象或一个数组。将这些类名从生成的 CSS 文件中排除。这在您需要使用外部样式（例如，引入第三方库）时是非常有用的。
combinators: 这是一个对象，用于指定 Atomizer 在转换期间使用的组合器。默认的组合器包括 ~、+、> 和（空格）等。
custom": {}: 这是一个对象，用于添加您自己的 Atomizer 原子规则或者修改默认规则。

示例

以下是一个基本应用的示例：

安装

npm install --save-dev ember-cli-atomizer
ember g ember-cli-atomizer
ember g atomizer-config

基本配置

以下是一个简单的配置文件，用于将 bg-red 类名编译为一个具有 background: red 样式的 css 规则：

// build-config/atomizer.json
{
  "classNames": {
    "bg-red": "background: red"
  }
}

这个配置文件将会被用来生成一个 CSS 文件：

.bg-red {background: red}

使用组合器

如果您的选择器需要使用组合器，您需要在 combinators 对象中指定：

-- -------------------- ---- -------
-- --------------------------
-
  ------------- -
    ------ ------- -----
    ------ ------------ ------
    ---- - ----- -
      -------- --------
      ------------- ------
    --
    ---- - ----- -
      -------- ----------
      ------------- ------
    -
  --
  -------------- -
    ---- - - --
    ---- - - -
  --
-

这个配置文件将编译为以下 CSS：

.foo {color: red}
.bar {background: blue}
.foo ~ .bar {color: green;background: pink}
.foo + .bar {color: hotpink;background: aqua}

结论

ember-cli-atomizer 为我们提供了一种便捷和高效的方式来分类和组织样式类名。无论是大型的还是小型的 Web 项目，都能够轻松地使用它。传统的 CSS 架构面临混乱和难与维护的问题，而 Atomizer 能够解决这些问题，并能够让我们的 CSS 代码更具有可读性和可维护性。

参考

官方文档

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f77238a385564ab6911