Bulma v0.7.0 迁移指南：变量变更全解与样式自定义回退方法
【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma
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"要点：
- 必须在
@importBulma 之前赋值。!default语义下，先赋值的值生效； - 派生变量（如
$hr-background-color依赖的$border）在 Bulma 的derived-variables文件中计算，直接覆盖派生变量即可生效； - 若只是局部微调，无需全量回退，可按上表逐条挑选变量；
- 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/下当前默认值，再决定是否沿用当年的回退写法。
【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
