npm 包 @historylab/design-tokens 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@historylab/design-tokens 是一个通过使用 CSS 变量来管理设计标准的 npm 包。使用该包可以使前端开发人员在整个项目中有效地使用设计元素，从而保持一致性、可重用性和易维护性。本文将详细介绍如何在前端项目中使用该 npm 包。

安装

可以通过 npm 进行安装：

npm install @historylab/design-tokens

使用

导入

要使用该 npm 包，你需要首先导入它：

import '@historylab/design-tokens';

使用变量

该 npm 包包含了一些预定义的 CSS 变量。你可以直接在你的 CSS 样式中使用这些变量进行样式的定义。变量可以分为颜色、字体、边距、阴影和尺寸等多个类别。例如使用颜色变量：

div {
  background-color: var(--color-primary);
}

编写自定义 CSS 变量

除了使用预定义的变量之外，你还可以自定义你自己的 CSS 变量。你可以在你的样式表中声明自定义变量，并在其中使用它们，如下所示：

:root {
  --my-color: #ff00ff;
}

div {
  background-color: var(--my-color);
}

使用自动生成的类名

在使用 CSS 变量的时候，它的写法可能会重复出现很多次，给代码的可读性和可维护性造成困扰。该 npm 包也提供了自动生成类名的功能。你可以在你的 HTML 元素中使用相应的类名，如下所示：

<div class="color-primary">My Primary Color</div>

该类名会自动地应用与预定义的颜色变量。你可以按照这种方式继续使用其他类别的预定义变量。

深度使用

如果你认为上述有关该 npm 包的使用方法过于简单，请继续阅读，下面将详细讨论如何深入使用以获取更高的自定义能力。

自定义变量集

你可以通过使用 createToken 方法来创建自己的变量集。使用此方法，您可以创建一个包含您自己预定义变量的对象。例如，以下代码创建了一个自定义变量集：

import { createToken } from '@historylab/design-tokens';

const myTokens = createToken({
  color: {
    primary: 'red',
    secondary: 'green'
  }
});

创建的参数对象可以包含以上阐述的任何预定义变量集类别。例如，你还可以包含字体、边距、阴影和尺寸等编写你自己的自定义变量集。

实例化自定义变量集

在为项目设置预定义的变量时，你需要实例化你创建的自定义变量集：

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

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

这样可以将你的自定义变量集应用于整个应用程序中。

自定义类名前缀

使用预定义的 CSS 类名可以使你的代码更加清晰和易读。为了进一步优化此体验，你可以设置一个自定义类名前缀。此时，您不再需要使用“变量名 + 类型”作为类名，而是可以添加您选择的前缀，从而使类名更加通用和语义化。

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

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

这样，预定义类名将被自动添加前缀作为类名的一部分。您可以按照自己的标准添加类名前缀。

示例代码

在下面的示例中，我们将使用自定义变量集为页面增加了自定义颜色和字体变量。该代码同样使用了自动生成的类名。

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

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

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

总结

通过使用 @historylab/design-tokens 这个 npm 包可以为你的项目提供一致的设计元素，具有成本效益且易维护。除此之外，你还可以使用自动类名、自定义变量集以及类名前缀等功能，增加自己的自定义能力。希望本文可以为你的前端项目带来帮助。

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