CSS 变量系统

相关源文件

• bower.json
• css/bulma.css
• css/bulma.css.map
• css/bulma.min.css
• css/versions/bulma-no-dark-mode.css
• css/versions/bulma-no-dark-mode.css.map
• css/versions/bulma-no-dark-mode.min.css
• css/versions/bulma-no-helpers-prefixed.css
• css/versions/bulma-no-helpers-prefixed.css.map
• css/versions/bulma-no-helpers-prefixed.min.css
• css/versions/bulma-no-helpers.css
• css/versions/bulma-no-helpers.css.map
• css/versions/bulma-no-helpers.min.css
• css/versions/bulma-prefixed.min.css
• docs/_config.yml
• docs/documentation/helpers/flexbox-helpers.html
• package.json
• sass/utilities/derived-variables.scss

Bulma 的 CSS 变量系统为主题化和自定义提供了一个全面且灵活的基础。本文档解释了 Bulma 如何构建和实现 CSS 自定义属性（变量），以实现框架内一致的样式、主题化能力和响应式设计。

目的与范围

Bulma 的 CSS 变量系统是整个框架的核心主题化机制。它支持

• 无需重新编译 CSS 即可进行运行时自定义
• 一致的配色方案和视觉模式
• 支持包括暗模式在内的多种主题
• 通过全局变量控制组件级样式
• 高效的颜色处理和派生

有关生成这些 CSS 变量的整体 SASS 架构的信息，请参阅 SASS 架构。

变量命名约定

Bulma 对所有 CSS 变量使用一致的命名约定

• 所有变量都带有前缀 --bulma-，以防止与其他框架发生命名冲突
• 使用描述性段的层级命名（例如，--bulma-primary-light-l）
• 变量类型的后缀指示符（例如，-l 表示亮度，-h 表示色相）

来源：css/bulma.css4-14 css/bulma.css17-77

核心变量结构

CSS 变量分为几个核心类别

1. 控制变量

这些定义了基本的控制元素属性，如边框宽度、内边距和高度

来源：css/bulma.css4-14

2. 主题变量

这些定义了配色方案的特征，为亮/暗模式和颜色处理提供了基础

来源：css/bulma.css17-47

3. 版式变量

定义字体系列、大小和粗细

来源：css/bulma.css50-62

4. 设计系统变量

定义间距、时间、边框圆角值

来源：css/bulma.css63-71

颜色系统

Bulma 的颜色系统尤为复杂，它使用 HSL（色相、饱和度、亮度）来定义颜色及其变体。这种方法可以实现

1. 系统性地创建更浅和更暗的变体
2. 一致的颜色关系
3. 易于为暗模式进行反转

每种颜色都有

• 基础 HSL 组件（--bulma-color-h、--bulma-color-s、--bulma-color-l）
• RGB 等效以便兼容（--bulma-color-rgb）
• 从 00 到 100 的亮度变体（--bulma-color-00-l 到 --bulma-color-100-l）
• 用于对比的颜色反转（--bulma-color-invert）
• 特定于方案的版本（--bulma-color-on-scheme）

颜色结构示例（以主颜色为例）

来源：css/bulma.css227-332

变量继承模式

Bulma 使用一种复杂的继承模式，其中变量引用其他变量

变量类型	参考资料
组件变量	引用全局设计变量
变体颜色	引用基础颜色组件
控件元素	引用大小和半径变量
反转颜色	根据原始颜色计算

这创造了一个级联系统，更新少量基础变量可以触发整个框架的更改。

继承示例

来源：css/bulma.css5-6 css/bulma.css319-320

特定版本的变量集

Bulma 提供不同的捆绑包，具有不同级别的 CSS 变量支持

版本	描述
标准	完整的 CSS 变量系统，包含所有功能
无深色模式	不包含暗模式主题支持的 CSS 变量
无辅助工具	不含辅助类别的核心变量
带前缀	所有 CSS 类都带前缀以避免冲突

来源：package.json41-44 css/versions/bulma-no-dark-mode.css1-14 css/versions/bulma-no-helpers.css1-14 css/versions/bulma-prefixed.min.css1-2

组件中的变量使用

组件会使用 CSS 变量来保持一致的样式。这种方法允许组件样式在主题变量更改时自动适应。

来源：css/bulma.css72-77 css/bulma.css81-100

自定义技术

使用 CSS 变量自定义 Bulma 主要有两种方法

1. 运行时自定义：在您自己的样式表中覆盖 CSS 变量

2. 构建时自定义：在编译前自定义 SASS 变量

运行时自定义更简单，但仅限于暴露为 CSS 变量的内容。构建时自定义提供完全控制，但需要重新编译。

来源：package.json38-52

暗模式实现

CSS 变量系统通过以下方式为 Bulma 的暗模式实现提供支持

1. 用于亮/暗指示器的基础变量（--bulma-light-l、--bulma-dark-l）
2. 颜色反转变量（--bulma-color-invert）
3. 方案亮度变量（--bulma-scheme-brightness）

要激活暗模式，需要用适当的值重新定义变量

可以通过调整这些覆盖值来完全自定义暗模式，或者通过使用 bulma-no-dark-mode.css 捆绑包将其完全排除。

来源：css/bulma.css17-21 css/bulma.css36-47 css/versions/bulma-no-dark-mode.css1-14

技术实现

CSS 变量定义在 :root 选择器中，以使其在整个文档中全局可用。这些变量在构建过程中从 SASS 生成，其函数会自动计算颜色关系。

构建过程允许生成不同变量集的不同 CSS 变体

来源：package.json38-52 css/bulma.css4-547

最佳实践

1. 使用提供的变量：不要硬编码颜色或尺寸，而是引用 Bulma 的变量来保持一致性。

2. 主题隔离：创建自定义主题时，仅覆盖所需的高级别变量。

3. 版本选择：根据您的需求选择合适的 Bulma 捆绑包（标准版、无暗模式版、无辅助类版）。

4. 组件扩展：使用自定义组件扩展 Bulma 时，遵循相同的变量结构和继承模式。

5. 响应式设计：利用尺寸和断点变量来保持响应式一致性。

来源： package.json41-44 css/bulma.css4-77

结论

Bulma 的 CSS 变量系统提供了一个强大的基础，用于主题化和定制。通过正确使用此系统，开发人员可以创建与不同主题和用户偏好保持一致的设计，同时保留根据需要自定义特定方面的能力。