# @financial-times/o-spacing 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-spacing/ 版本：3\.2\.6 npm 元数据更新时间：2026-10-06T13:39:51.459Z 中文译文更新时间：2026-11-14T18:29:08.342Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-spacing 原文对照：https://npmcn.com/package/%40financial-times/o-spacing/?lang=original 项目主页：https://registry.origami.ft.com/components/o-spacing ## 关键信息（来自 npm 元数据） - 包体积（解压后）：24.4 kB，11 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：@financial-times/math ^1\.0\.0 - 首次发布：2019-05-23T16:05:09.037Z - 最新版本发布：2026-02-26T10:55:27.031Z - 近 30 天下载量：14095（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：22（近 12 个月 1 个） ## 中文简介 按照我们的基线网格和设计准则,保持各组成部分和项目的一致空间. ## 安装 ```sh npm install @financial-times/o-spacing ``` 也可以使用：`pnpm add @financial-times/o-spacing`、`yarn add @financial-times/o-spacing`、`bun add @financial-times/o-spacing` ## README > ⚠️ **注:** o- 间隔已被替换为 [o3 创建](https://npmcn.com/package/%40financial-times/o3-foundation/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-spacing/MIGRATION.md#migrating-from-v3-to-o3-foundation@3) 用于升级的步骤. # 零间距 根据设计准则内的基线网格,设置一个用于援助时间间隔一致的项目和部分的型式公用事业部分. - [使用量](https://npmcn.com/package/%40financial-times/o-spacing/#readme-usage) - [空间](https://npmcn.com/package/%40financial-times/o-spacing/#readme-spaces) - [标记](https://npmcn.com/package/%40financial-times/o-spacing/#readme-markup) - [CSS 自定义属性](https://npmcn.com/package/%40financial-times/o-spacing/#readme-css-custom-properties) - [萨斯](https://npmcn.com/package/%40financial-times/o-spacing/#readme-sass) - [移徙](https://npmcn.com/package/%40financial-times/o-spacing/#readme-migration) - [联系人](https://npmcn.com/package/%40financial-times/o-spacing/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-spacing/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-spacing`。 。 。 . 对于 [构建服务](https://www.ft.com/__origami/service/build/) 用户, `o-spacing` 提供 [CSS课程](https://npmcn.com/package/%40financial-times/o-spacing/#readme-markup) 垂直空间和 [CSS 自定义属性( CSS 变量)](https://npmcn.com/package/%40financial-times/o-spacing/#readme-css-custom-properties) 用于其他用例。 用于 Sass 用户 `o-spacing` 也提供了一些 [Sass 函数和混音器](https://npmcn.com/package/%40financial-times/o-spacing/#readme-sass) 为项目应用空间. ## 空间 ![Visual representation of spaces defined below.](https://user-images.githubusercontent.com/10405691/57918050-e9381780-788d-11e9-8310-ba5053c0c84a.png) _以上插图取自 [UXD 缩写工具箱](https://sites.google.com/ft.com/ft-design-system)。 。 。 ._ ### 基线 我们的基线网格默认为4px. 这一缺省的任何倍数均可被应用于一个项目. 我们建议使用我们的 [已命名空格](https://npmcn.com/package/%40financial-times/o-spacing/#readme-named-spaces) 为了一致性. ### 已命名空格 命名的空格是用于连贯布局一个组件或页面的大小 。 每个空间都基于4px基线. 小型,例如 `s1` 或者说 `s2` 用于组件内空间的理想; 使用中等尺寸 `m12` 财务报告和审定财务报表 `m16` 用于页面上的相关内容;和 大尺寸 `l18`, (中文(简体) ), `l24` 将项目的不同区域分开. | 名称 | 价值 | | :-: | :-: | | 第1条 | 四进制 | | 第2条 | 8个px | | 第3条 | 12px 时速 | | 第4条 | 16px 时 | | 第6条 | 24px (英语) | | 第8条 | 32px 密码 | | 12平方米 | 48px 坐标 | | 平方厘米 | 64px (英语) | | 页:1 | 72px (英语) | | 24岁 | 96px (英语) | 应用命名的空格 `o-spacing` [标记](https://npmcn.com/package/%40financial-times/o-spacing/#readme-markup) 财务报告和审定财务报表 [萨斯](https://npmcn.com/package/%40financial-times/o-spacing/#readme-sass) 文档. ## 标记 `o-spacing` 提供实用课程,帮助您项目内垂直的空间 Origami 组件. ```html
``` 对其他属性应用空格 `o-spacing` 提供 [CSS 自定义属性( CSS 变量)](https://npmcn.com/package/%40financial-times/o-spacing/#readme-css-custom-properties)。 。 。 . ## CSS 自定义属性 ### 命名自定义空间属性 `o-spacing` a 每个指定空间的 CSS 自定义属性( CSS 变量)。 举个例子. `--o-spacing-s1`。这些可以用于在自定义 CSS 中应用空格,如果您的工程 [支持](https://caniuse.com/#feat=css-variables) CSS 自定义属性. 这对 [构建服务](https://www.ft.com/__origami/service/build/) 无法访问的用户 `o-spacing`是因为 [萨斯](https://npmcn.com/package/%40financial-times/o-spacing/#readme-sass) 函数. ```scss .example { margin: var(--o-spacing-s1); } ``` ### 基线自定义属性 我们建议使用 [命名空间](https://npmcn.com/package/%40financial-times/o-spacing/#readme-named-spaces),但对于更多的颗粒控制,项目可以输出任何空间,这是我们基准值的倍数。 对于无法访问Sass的用户, `o-spacing` 产出a `--o-spacing-baseline` CSS变量. ```scss .example { padding: calc(var(--o-spacing-baseline) * 1); // A small padding (4px). margin-bottom: calc(var(--o-spacing-baseline) * 4); // A large space (16px). } ``` ## 萨斯 ### 相对单位 为了与现有的Origami项目兼容, `o-spacing` 产出 `px` 默认值。 用于相对 `rem` 数值,设置 `$o-spacing-relative-units: true` 导入前 `@financial-times/o-spacing/main`。 。 。 . ```scss $o-spacing-relative-units: true; .example { padding: oSpacingByName('s1'); // Small padding (0.24rem). margin-bottom: oSpacingByName('m12'); // Medium margin (3rem). } ``` _如果使用 `o-typography` 设定 [美元打字-相对单位](https://registry.origami.ft.com/components/o-typography@5.11.3/sassdoc?brand=core#variable-o-typography-relative-units) 临τ._ ### 命名空间 我们建议Sass用户在项目中使用空间 `oSpacingByName` 函数。 它接受一个 [空间名称](https://npmcn.com/package/%40financial-times/o-spacing/#readme-named-spaces) 返回 a `px` 数值(或 `rem` 值,如果 [相对单位](https://npmcn.com/package/%40financial-times/o-spacing/#readme-relative-units) 已启用). ```scss .example { padding: oSpacingByName('s1'); // Small padding (4px). margin-bottom: oSpacingByName('m12'); // Medium margin (48px). } ``` ### 基线空间 我们建议使用 [已命名空格](https://npmcn.com/package/%40financial-times/o-spacing/#readme-named-space),但任何空间 乘以我们 [基线](https://npmcn.com/package/%40financial-times/o-spacing/#readme-baseline) 允许。 应用基准值的倍数 `oSpacingByIncrement`中,它接受一个值,将基线乘以并返回 a `px` 数值(或 `rem` 值,如果 [相对单位](https://npmcn.com/package/%40financial-times/o-spacing/#readme-relative-units) 已启用). ```scss .example { margin-bottom: oSpacingByIncrement(4); } ``` ### 自定义属性和工具类 我们建议用户使用 Sass 函数应用命名空间 [时间间隔Name](https://npmcn.com/package/%40financial-times/o-spacing/#readme-named-space),但 Sass 用户可能输出全部 `o-spacing` CSS 包括 [工具类](https://npmcn.com/package/%40financial-times/o-spacing/#readme-markup) 财务报告和审定财务报表 [CSS 自定义属性](https://npmcn.com/package/%40financial-times/o-spacing/#readme-css-custom-properties) 使用 `oSpacing` 混合剂. ```scss @include oSpacing($opts: ( 'margin-bottom-utilities': true, // Output CSS classes such as `o-spacing-s1` 'custom-properties': true // Output CSS variables )); ``` ## 移徙 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 活动 | 单位3 | 不详 | [迁移到 Origami 3](https://npmcn.com/package/%40financial-times/o-spacing/MIGRATION.md#migrating-from-v3-to-o3-foundation@3) | | 维护 | 3个 | 不详 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-spacing/MIGRATION.md#migrating-from-v2-to-v3) | | 已贬值 | 2个 | 2.1 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-spacing/MIGRATION.md#migrating-from-v1-to-v2) | | 已贬值 | 1个 | 1.0 国家 | 不详 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-spacing/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-spacing 是什么？ 按照我们的基线网格和设计准则,保持各组成部分和项目的一致空间\. ### 如何安装 @financial-times/o-spacing？ 在项目目录运行 npm install @financial-times/o-spacing，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-spacing 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-spacing 是否存在。 ### @financial-times/o-spacing 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-spacing 可以商用吗？ @financial-times/o-spacing 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-spacing 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-spacing 在 2026/10/15 – 2026/11/13 这 30 天内被下载 14,095 次，日均约 470 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-spacing 还在维护吗？ 最新版本 3\.2\.6 发布于 2026/02/26（8 个月前）；至今共发布 22 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/05/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。