前言
在前端开发中，样式的一致性十分重要，而 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 为例，你可以执行以下命令：
npm install @bbc/gel-constants --save
如果你使用 yarn，则执行以下命令：
yarn add @bbc/gel-constants
使用
引入
在引入 @bbc/gel-constants 之前，你需要先确保你的项目已经引入了 BBC 的字体（Reith Sans 和 Reith Serif）和样式表（gelliberation.min.css）。你可以在 HTML 的 head 标签中引入它们：
<head> <link rel="stylesheet" href="https://gel.files.bbci.co.uk/libs/gel/v7.0.3/css/gel.min.css" /> <link rel="stylesheet" href="https://gel.files.bbci.co.uk/libs/gel/v7.0.3/css/gelliberation.min.css" /> </head>
在你的 JavaScript 文件中，你需要先引入 @bbc/gel-constants 包：
import * as GEL_CONSTANTS from "@bbc/gel-constants";
使用示例
以下是一些使用 @bbc/gel-constants 的示例：
示例 1：使用 GEL 字体
h1 {
font-family: $SUMMIT_FONTS;
font-size: $FONT_SIZE_5;
}示例 2：使用 GEL 颜色
a {
color: $GEL_RED_1;
}
button {
color: $GEL_WHITE;
background-color: $GEL_RED_1;
}示例 3：使用 GEL 间距
.section {
padding: $GEL_SPACING_4;
}
.card {
margin-bottom: $GEL_SPACING_4;
}示例 4：使用 GEL 常用 z-index 值
.overlay {
z-index: $GEL_Z_INDEX_TOP;
}
.floating-box {
z-index: $GEL_Z_INDEX_TINT;
}总结
通过使用 @bbc/gel-constants 这个 npm 包，你可以更加便捷地访问 GEL 的常见变量和相关信息。在 GEL 规范的基础之上，它有助于提高开发者的开发效率。如果你正在开发一个使用 GEL 的 BBC 前端项目，那么 @bbc/gel-constants 绝对是一个值得推荐的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d092702382297c