npm 包 @spiregg/styleguide 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代化的 Web 开发中，使用标准的样式维护方式来保持项目一致性变得越来越重要。一个好的样式指南库（styleguide）可以通过提供一致性的编写规范、颜色、字体和交互等方面的帮助来加速项目的构建。

项目中对于样式指南的维护是一个团队协作的工作，所以 @spiregg/styleguide 就是为此而生的样式指南库解决方案。@spiregg/styleguide 是一个使用方便的 npm 包，它包含一个现成设计的基本样式库供开发者使用。本文将详细介绍如何使用 @spiregg/styleguide 以及如何自定义和维护它。

安装和使用

要使用 @spiregg/styleguide，首先需要使用 npm 安装：

npm install @spiregg/styleguide

然后，在项目的任何需要使用样式库的地方进行导入@spiregg/styleguide 的 css 文件即可，例如，在项目的 index.html 文件中，可以添加以下代码：

<link rel="stylesheet" href="./node_modules/@spiregg/styleguide/dist/styleguide.css">

这会将已设计好的样式应用于项目中。

颜色和字体

@spiregg/styleguide 提供了一系列颜色和字体转变，允许开发者在项目中使用这些共享颜色和字体。为了使用这些颜色和字体，开发者可以在项目中使用 CSS variables。

例如，应用项目的主要样式变量：

:root {
  --primary-color: var(--sg-brand-primary);
  --secondary-color: var(--sg-brand-secondary);
  --text-color: var(--sg-text-body);
  --font-family: var(--sg-font-primary);
}

在本例中，开发者使用的颜色和字体都是 @spiregg/styleguide 库中预定义的。

组件库

@spiregg/styleguide 除了提供颜色定制 APIs 之外，还提供了常见界面组件定制化 APIs，使项目中的组件更具可复用性、可维护性并提升应用的一致性。

目前组件库包含以下组件：

Buttons
Checkboxes and radios
Forms
Links
Lists
Loading spinners
Tabs

开发者可以在项目中通过调用组件API去更改组件的样式，让它们与项目的整体风格保持一致性。例如，要将 @spiregg/styleguide 中的按钮添加到项目中，可以将以下代码添加到项目的 HTML 文件中的适当位置：

<button class="sg-button">Example button</button>

此 button 将使用标准的 @spiregg/styleguide 样式和样式表。在此基础上可以自定制，添加后缀类名和修改对应的css变量即可。比如添加一个圆角按钮的代码为：

<button class="sg-button sg-button--rounded">Example button</button>

按钮的边角将被设置为圆角。

高级使用

在某些情况下，开发者可能需要尝试与 @spiregg/styleguide 的样式进行交互以满足项目的特定需求。幸运的是，@spiregg/styleguide 提供了一些高级使用方案使得进行个性化定制实现变得更容易。

sass / scss 集成

@spiregg/styleguide 中定义了大量样式，但是只有一部分样式经过了参数化处理，因此无法直接在不编辑 @spiregg/styleguide 的样式的情况下充分利用 @spiregg/styleguide 样式的创建，这时候就需要利用 @spiregg/styleguide css文件来源来进行零耦合集成。

例如，当我们要对按钮的背景色、文字颜色、圆角程度进行修改时，可以在项目中使用 Sass/Scss 来加载 @spiregg/styleguide 的变量。假设项目已经安装 @spiregg/styleguide，为了使用 @spiregg/styleguide 的颜色和字体等自定义信息，可以定义类似于以下的 SCSS 变量：

$sg-primary-color: var(--sg-brand-primary);
$sg-secondary-color: var(--sg-brand-secondary);
$sg-text-color: var(--sg-text-body);
$sg-font-family: var(--sg-font-primary);

这样，开发者便可以再进行到样式定制前预加载自定义变量，以便使用这些自定义的变量，作为不参与源字符串计算的参数进行自定义样式。

自定义样式

@spiregg/styleguide 提供了一些用于自定义样式的类。这些类提供了更全面的样式控制。例如，要对按钮颜色和文字颜色进行自定义，可以使用以下类：

.sg-button--custom {
  background-color: #ffc29d;
  color: #333;
}

此类将应用于包含类 .sg-button--custom 的任何按钮。

结论

@spiregg/styleguide 是一个方便易用的样式指南库，支持以参数处理构建组件样式，支持在工程中自定义样式并计算，当然还支持 Sass 和 SCSS 等预处理器集成。将它应用于项目中可以提高开发效率，避免重复劳动并保持项目一致性。了解 @spiregg/styleguide 提供的样式和 API，可以方便地将样式应用到项目中，并根据需要进行自定义样式。

示例代码

HTML

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

SCSS 变量

$sg-primary-color: var(--sg-brand-primary);
$sg-secondary-color: var(--sg-brand-secondary);
$sg-text-color: var(--sg-text-body);
$sg-font-family: var(--sg-font-primary);

自定义样式

.sg-button--custom {
  background-color: #ffc29d;
  color: #333;
}

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