Bulma v0.7.0 迁移指南：变量变更全解与样式自定义回退方法

Bulma v0.7.0 是框架的一次重要版本更新，除了配合官网大改版，它带来了若干新功能、缺陷修复，以及一组 Sass 变量的默认值变更。本文基于仓库中的迁移文档 2018-04-14-migration-to-v070.md 与 CHANGELOG.md 中 v0.7.0 条目，完整梳理本次版本中所有"已修改默认值 / 新增 / 移除"的变量，并结合当前仓库 sass/ 目录的源码，说明每一项变更的实际影响、如何验证，以及在自定义样式被改动后如何精准回退。

v0.7.0 更新总览：变量变更之外的新能力

官方说明指出，v0.7.0 主要围绕一次大规模的网站改版展开，同时包含 bug 修复、新功能和变量变更；这些变量变更被专门记录下来，就是为了让你在需要时"编辑它们，或者把它们改回去（revert）"。

结合 CHANGELOG.md 中 ## 0.7.0 章节，本次版本的新增能力包括：

新增功能

• 新变量 $widescreen-enabled 与 $fullhd-enabled：设为 false 即可分别禁用 widescreen / fullhd 两个断点；
• 新变量 $control-border-width 与 $button-border-width，将表单控件与按钮的边框宽度纳入可配置范围；
• 为 .image 增加了一批摄影常用宽高比与竖幅比例（is-ratio-* 修饰符）；
• 新变量 $custom-colors 与 $custom-shades，允许把自定义颜色 / 色调合并进 Bulma 的 $colors / $shades 映射表。

改进

• 新增 $card-header-background-color、$card-content-background-color、$card-footer-background-color，使 .card 各区块背景可分别定制；
• .buttons.has-addons 支持 .is-expanded 修饰符；
• 新增 .has-background 背景色 helper（与 .has-text 对应）；
• 提供经 clean-css 压缩后的 minified 打包产物。

缺陷修复

• 修复 is-text-right 优先级高于 is-text-left-mobile 的冲突；
• 修复 .tag 上 delete 按钮的定位；
• 实现了简化版的原生 Sass percentage 函数；
• 默认禁用 .content 内的表格 hover 效果；
• 修复 media-content 溢出问题。

这些能力本身没有破坏性，真正影响存量项目视觉表现的是下一节详述的变量变更。

已更新的默认值（Updated default values）

迁移文档以"按文件分组、逐变量列出 From → To"的方式记录了所有默认值变化。以下为完整清单。

sass/utilities/initial-variables.sass（全局基础变量）

变量	原值（From）	新值（To）
$gap	32px	64px
$radius	3px	4px
$radius-large	5px	6px

$gap 是 v0.4.4 引入的核心变量，同时决定 .container 的响应式断点与容器两侧留白；将其翻倍到 64px 会直接影响 desktop / widescreen / fullhd 断点的计算基准。从当前仓库源码看，断点仍由它派生（initial-variables.scss）：

$gap: 32px !default;                    // 当前版本已回到 32px
$desktop: 960px + 2 * $gap !default;
$widescreen: 1152px + 2 * $gap !default;
$fullhd: 1344px + 2 * $gap !default;

值得注意：当前仓库（v1.x）中 $gap 的默认值又回到了 32px，$radius / $radius-large 也改用了 rem 单位（initial-variables.scss 中为 $radius: 0.375rem、$radius-large: 0.75rem）。也就是说 v0.7.0 引入的默认值在后续版本中继续演化过，若你按 v0.7.0 的数值回退样式，需以你所使用的具体版本为准。

sass/base/generic.sass（通用基础样式）

变量	原值	新值
$hr-background-color	border	$background
$hr-height	1px	2px

即 <hr> 分隔线从 1px 边框色变为 2px 的页面背景色——视觉上更粗、更"融入背景"。当前仓库中该样式仍保留 2px 高度，并进一步用 cv.getVar("background") 从 CSS 变量取值（generic.scss）：

$hr-background-color: cv.getVar("background") !default;
$hr-height: 2px !default;

sass/elements/content.sass（内容排版）

变量	原值	新值
$content-heading-weight	$weight-normal	$weight-semibold

.content 内的 h1–h6 从常规字重改为半粗体，正文中的小标题对比度更高。

sass/components/message.sass（消息组件）

变量	原值	新值
$message-header-padding	0.5em 0.75em	0.75em 1em
$message-body-padding	1em 1.25em	1.25em 1.5em

.message 的头部与正文内边距整体加大，消息块更"松"。

sass/components/navbar.sass（导航栏）

变量	原值	新值
$navbar-item-hover-background-color	$background	$white-bis
$navbar-dropdown-border-top	1px solid $border	2px solid $border
$navbar-divider-background-color	$border	$background

导航项 hover 背景与分隔线改由 $background 承担（在默认主题下即 white-ter 一级的灰白），下拉面板顶部分隔线加粗到 2px，与上文 <hr> 的 2px 风格保持一致。

sass/layout/footer.sass（页脚）

变量	原值	新值
$footer-background-color	$background	$white-bis

页脚背景比页面背景略深一档，与内容区拉开层次。

新增变量（New variables）

v0.7.0 还引入了一批此前不存在、用于细化控制粒度的变量。这些变量在后续版本中大多被保留下来（当前仓库对应文件已由 .sass 更名为 .scss，如 sass/components/navbar.scss、sass/components/message.scss 等）。

sass/components/breadcrumb.sass

变量名	默认值	作用
$breadcrumb-item-padding-vertical	0	面包屑项垂直内边距
$breadcrumb-item-padding-horizontal	0.75em	面包屑项水平内边距

此前面包屑项的内边距是写死的，v0.7.0 起垂直 / 水平方向可分别调整。

sass/components/message.sass

变量名	默认值	作用
$message-body-border-color	$border	消息体左侧色条颜色
$message-body-border-width	0 0 0 4px	消息体左侧色条宽度（仅左侧 4px）
$message-header-weight	$weight-bold	消息头字重
$message-header-body-border-width	0	头部与正文之间的边框宽度

这组变量把 .message 的左侧彩色指示条（经典 Bulma 消息样式）拆成了颜色 / 宽度两个独立维度，0 0 0 4px 即"只有左边有 4px 边框"。

sass/components/navbar.sass

变量名	默认值	作用
$navbar-box-shadow-size	0 2px 0 0	导航栏阴影尺寸
$navbar-box-shadow-color	$background	导航栏阴影颜色
$navbar-padding-vertical	1rem	导航栏垂直内边距
$navbar-padding-horizontal	2rem	导航栏水平内边距
$navbar-z	30	导航栏 z-index

注意：阴影在 v0.7.1 中被默认移除（见 CHANGELOG.md 的 #1796 #1806 Remove navbar box-shadow by default），因此这两个 box-shadow 变量在 0.7.1 之后默认不生效，但变量本身保留，方便需要阴影的项目开启。

sass/elements/title.sass

变量名	默认值	作用
$title-line-height	1.125	.title 行高
$subtitle-line-height	1.25	.subtitle 行高
$subtitle-negative-margin	-1.25rem	.subtitle 的负上边距

$subtitle-negative-margin 是 v0.7.0 的关键排版变量：当 .subtitle 紧跟 .title 之后，它用负 margin 把副标题拉回更紧凑的位置，替代了此前"标题+副标题"组合里写死的间距。

被移除的变量（Removed variables）

v0.7.0 只有一个变量被移除，且给出了明确替代：

文件	被移除	替代为
sass/components/message.sass	$message-body-border	$message-body-border-color、$message-body-border-width

原来用单个变量 $message-body-border 表达"左边框"，v0.7.0 将其拆分为颜色、宽度两个变量（见上文新增变量表）。如果你在自己的自定义样式中 override 过 $message-body-border，升级到 v0.7.0 后该覆盖会静默失效（变量不再被引用），需要改为覆盖 $message-body-border-color / $message-body-border-width。

如何回退（Revert）到 v0.7.0 之前的视觉表现

迁移文档的原始意图就是"如果你不希望这些变化，可以编辑或回退它们"。Bulma 的自定义机制基于 Sass 的 !default：所有变量都带 !default 后缀，只要在你自己的样式文件中先于 Bulma 赋值，即可覆盖默认值。以回退 v0.7.0 的全部视觉变更为例：

// custom.sass（v0.7.0 时代写法；文件扩展名以所用版本为准）

// ---- 回退 initial-variables ----
$gap: 32px
$radius: 3px
$radius-large: 5px

// ---- 回退 base/generic ----
$hr-background-color: $border
$hr-height: 1px

// ---- 回退 elements/content ----
$content-heading-weight: $weight-normal

// ---- 回退 components/message ----
$message-header-padding: 0.5em 0.75em
$message-body-padding: 1em 1.25em

// ---- 回退 components/navbar ----
$navbar-item-hover-background-color: $background
$navbar-dropdown-border-top: 1px solid $border
$navbar-divider-background-color: $border

// ---- 回退 layout/footer ----
$footer-background-color: $background

// 最后再导入 Bulma
@import "~/bulma/bulma.sass"

要点：

1. 必须在 @import Bulma 之前赋值。!default 语义下，先赋值的值生效；
2. 派生变量（如 $hr-background-color 依赖的 $border）在 Bulma 的 derived-variables 文件中计算，直接覆盖派生变量即可生效；
3. 若只是局部微调，无需全量回退，可按上表逐条挑选变量；
4. v1.x 起 Bulma 引入了 CSS 变量与主题机制（如 --bulma-hr-height），自定义方式与 v0.7.0 时代的纯 Sass 覆盖有所不同——参考 CHANGELOG.md 中 v1.0.0 一节的说明，v1 的 CSS 片段（HTML）不变，但自定义入口从"覆盖 Sass 变量"扩展为"CSS 变量 / Theme"，回退旧版默认值时建议先确认目标版本的变量清单，可用当前仓库 docs/_data/variables/ 下的各组件 JSON（如 message.json、navbar.json）核对变量是否仍存在及当前默认值。

结合当前仓库验证变更的落地情况

当前仓库是 Bulma v1.x 代码库，v0.7.0 的变量多数已演进，可以据此观察"迁移变更"的长期走向：

• $gap：当前默认 32px（initial-variables.scss），断点公式 960px + 2 * $gap 等保持不变，说明 v0.7.0 将其翻倍到 64px 的实验在后续版本被回调；
• $hr-height: 2px：v0.7.0 的 2px 决定被保留至今（generic.scss），且背景色取值方式升级为从 CSS 变量读取；
• $message-body-border-color / $message-body-border-width：替代被移除的 $message-body-border，仍是 message 组件的现行变量（message.scss）；
• breadcrumb / navbar / title 的新增变量：$breadcrumb-item-padding-*、$navbar-padding-vertical、$navbar-padding-horizontal、$title-line-height 等均已保留在 breadcrumb.scss、navbar.scss、title.scss 中；
• 文件扩展名：v0.9.2 起代码库移除了对 .sass 扩展名的引用（见 CHANGELOG.md 0.9.2 Bug fixes 一节），迁移文档中写的 sass/components/message.sass 在当前仓库对应 sass/components/message.scss，查找源码时注意这一映射。

小结

v0.7.0 的变量变更全部集中在间距、圆角、分隔线与导航/页脚层次这类全局视觉参数上：$gap、$radius 翻倍带来更舒展的容器与更圆的边角，2px 分隔线贯穿 <hr>、navbar 下拉与 footer 层次，message 组件获得左侧色条的独立控制。由于所有变量均为 !default，升级后若视觉风格偏移，只需在导入 Bulma 前覆盖对应变量即可精确回退；而对 2018 年之后维护的 v1.x 项目，则应先核对 sass/ 下当前默认值，再决定是否沿用当年的回退写法。