前言
在前端开发中，样式的一致性十分重要，而 BBC Global Experience Language (GEL) 是 BBC 国际化的设计语言。为了让开发者更加便捷地使用 GEL，BBC 团队开发了 @bbc/gel-constants 这个 npm 包，以提供快速访问 GEL 变量和其他相关信息。本文将详细介绍如何使用 @bbc/gel-constants 这个npm 包以及它所包含的内容。
概述
@bbc/gel-constants 包含了 GEL 的字体、颜色、间距等常见变量。具体而言，该包包含了以下内容：
GEL 字体：
FONT_STACK、FONT_SIZE_1、FONT_SIZE_2、FONT_SIZE_3、FONT_SIZE_4、FONT_SIZE_5。GEL 颜色：
GEL_BLACK、GEL_GREY_1、GEL_GREY_2、GEL_GREY_3、GEL_GREY_4、GEL_GREY_5、GEL_WHITE、GEL_RED_1、GEL_RED_2、GEL_RED_3、GEL_RED_4、GEL_RED_5、GEL_RED_6、GEL_RED_7、GEL_RED_8、GEL_RED_9、GEL_RED_10、GEL_RED_11。GEL 间距：
GEL_SPACING_NONE、GEL_SPACING_HLF、GEL_SPACING_1、GEL_SPACING_2、GEL_SPACING_3、GEL_SPACING_4、GEL_SPACING_5、GEL_SPACING_6、GEL_SPACING_7、GEL_SPACING_8、GEL_SPACING_9、GEL_SPACING_10。
此外，@bbc/gel-constants 还包含了其他 GEL 相关信息，例如：
- GEL 的流体类型比例；
- GEL 文字样式（粗体、斜体等）；
- GEL 照片宽高比；
- GEL 常用 z-index 值等。
安装
你可以直接通过 npm 或 yarn 安装 @bbc/gel-constants 包。以 npm 为例，你可以执行以下命令：
--- ------- ------------------ ------
如果你使用 yarn，则执行以下命令：
---- --- ------------------
使用
引入
在引入 @bbc/gel-constants 之前，你需要先确保你的项目已经引入了 BBC 的字体（Reith Sans 和 Reith Serif）和样式表（gelliberation.min.css）。你可以在 HTML 的 head 标签中引入它们：
------ ----- ---------------- ------------------------------------------------------------------- -- ----- ---------------- ----------------------------------------------------------------------------- -- -------
在你的 JavaScript 文件中，你需要先引入 @bbc/gel-constants 包：
------ - -- ------------- ---- ---------------------
使用示例
以下是一些使用 @bbc/gel-constants 的示例：
示例 1：使用 GEL 字体
-- - ------------ -------------- ---------- ------------- -
示例 2：使用 GEL 颜色
- - ------ ----------- - ------ - ------ ----------- ----------------- ----------- -
示例 3：使用 GEL 间距
-------- - -------- --------------- - ----- - -------------- --------------- -
示例 4：使用 GEL 常用 z-index 值
-------- - -------- ----------------- - ------------- - -------- ------------------ -
总结
通过使用 @bbc/gel-constants 这个 npm 包，你可以更加便捷地访问 GEL 的常见变量和相关信息。在 GEL 规范的基础之上，它有助于提高开发者的开发效率。如果你正在开发一个使用 GEL 的 BBC 前端项目，那么 @bbc/gel-constants 绝对是一个值得推荐的工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d030d092702382297c