在现代化的 Web 开发中，使用标准的样式维护方式来保持项目一致性变得越来越重要。 一个好的样式指南库（styleguide）可以通过提供一致性的编写规范、颜色、字体和交互等方面的帮助来加速项目的构建。
项目中对于样式指南的维护是一个团队协作的工作，所以 @spiregg/styleguide 就是为此而生的样式指南库解决方案。@spiregg/styleguide 是一个使用方便的 npm 包，它包含一个现成设计的基本样式库供开发者使用。本文将详细介绍如何使用 @spiregg/styleguide 以及如何自定义和维护它。
安装和使用
要使用 @spiregg/styleguide，首先需要使用 npm 安装：
--- ------- -------------------
然后，在项目的任何需要使用样式库的地方进行导入@spiregg/styleguide 的 css 文件即可，例如，在项目的 index.html 文件中，可以添加以下代码：
----- ---------------- --------------------------------------------------------------
这会将已设计好的样式应用于项目中。
颜色和字体
@spiregg/styleguide 提供了一系列颜色和字体转变，允许开发者在项目中使用这些共享颜色和字体。为了使用这些颜色和字体，开发者可以在项目中使用 CSS variables。
例如，应用项目的主要样式变量：
----- - ---------------- ------------------------ ------------------ -------------------------- ------------- -------------------- -------------- ----------------------- -
在本例中，开发者使用的颜色和字体都是 @spiregg/styleguide 库中预定义的。
组件库
@spiregg/styleguide 除了提供颜色定制 APIs 之外，还提供了常见界面组件定制化 APIs，使项目中的组件更具可复用性、可维护性并提升应用的一致性。
目前组件库包含以下组件：
- Buttons
- Checkboxes and radios
- Forms
- Links
- Lists
- Loading spinners
- Tabs
开发者可以在项目中通过调用组件API去更改组件的样式，让它们与项目的整体风格保持一致性。例如，要将 @spiregg/styleguide 中的按钮添加到项目中，可以将以下代码添加到项目的 HTML 文件中的适当位置：
------- ------------------------- ---------------
此 button 将使用标准的 @spiregg/styleguide 样式和样式表。在此基础上可以自定制，添加后缀类名和修改对应的css变量即可。比如添加一个圆角按钮的代码为：
------- ---------------- --------------------------- ---------------
按钮的边角将被设置为圆角。
高级使用
在某些情况下，开发者可能需要尝试与 @spiregg/styleguide 的样式进行交互以满足项目的特定需求。幸运的是，@spiregg/styleguide 提供了一些高级使用方案使得进行个性化定制实现变得更容易。
sass / scss 集成
@spiregg/styleguide 中定义了大量样式，但是只有一部分样式经过了参数化处理，因此无法直接在不编辑 @spiregg/styleguide 的样式的情况下充分利用 @spiregg/styleguide 样式的创建，这时候就需要利用 @spiregg/styleguide css文件来源来进行零耦合集成。
例如，当我们要对按钮的背景色、文字颜色、圆角程度进行修改时，可以在项目中使用 Sass/Scss 来加载 @spiregg/styleguide 的变量。假设项目已经安装 @spiregg/styleguide，为了使用 @spiregg/styleguide 的颜色和字体等自定义信息，可以定义类似于以下的 SCSS 变量：
------------------ ------------------------ -------------------- -------------------------- --------------- -------------------- ---------------- -----------------------
这样，开发者便可以再进行到样式定制前预加载自定义变量，以便使用这些自定义的变量，作为不参与源字符串计算的参数进行自定义样式。
自定义样式
@spiregg/styleguide 提供了一些用于自定义样式的类。这些类提供了更全面的样式控制。例如，要对按钮颜色和文字颜色进行自定义，可以使用以下类：
------------------ - ----------------- -------- ------ ----- -
此类将应用于包含类 .sg-button--custom 的任何按钮。
结论
@spiregg/styleguide 是一个方便易用的样式指南库，支持以参数处理构建组件样式，支持在工程中自定义样式并计算，当然还支持 Sass 和 SCSS 等预处理器集成。将它应用于项目中可以提高开发效率，避免重复劳动并保持项目一致性。了解 @spiregg/styleguide 提供的样式和 API，可以方便地将样式应用到项目中，并根据需要进行自定义样式。
示例代码
HTML
--------- -----
----- ----------
------
----- --------------- --
-------------- -----------
----- ---------------- --------------------------------------------------------------
-------
------
---------- -----------
------- ------------------------- ---------------
------- ---------------- ------------------------- ---------------
-------
-------SCSS 变量
------------------ ------------------------ -------------------- -------------------------- --------------- -------------------- ---------------- -----------------------
自定义样式
------------------ - ----------------- -------- ------ ----- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e3d9381d61a3540a71