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

Bulma v0.7.0 迁移指南变量变更全解与样式自定义回退方法【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulmaBulma 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 按钮的定位实现了简化版的原生 Sasspercentage函数默认禁用.content内的表格 hover 效果修复media-content溢出问题。这些能力本身没有破坏性真正影响存量项目视觉表现的是下一节详述的变量变更。已更新的默认值Updated default values迁移文档以按文件分组、逐变量列出 From → To的方式记录了所有默认值变化。以下为完整清单。sass/utilities/initial-variables.sass全局基础变量变量原值From新值To$gap32px64px$radius3px4px$radius-large5px6px$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-colorborder$background$hr-height1px2px即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-padding0.5em 0.75em0.75em 1em$message-body-padding1em 1.25em1.25em 1.5em.message的头部与正文内边距整体加大消息块更松。sass/components/navbar.sass导航栏变量原值新值$navbar-item-hover-background-color$background$white-bis$navbar-dropdown-border-top1px solid $border2px 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 variablesv0.7.0 还引入了一批此前不存在、用于细化控制粒度的变量。这些变量在后续版本中大多被保留下来当前仓库对应文件已由.sass更名为.scss如sass/components/navbar.scss、sass/components/message.scss等。sass/components/breadcrumb.sass变量名默认值作用$breadcrumb-item-padding-vertical0面包屑项垂直内边距$breadcrumb-item-padding-horizontal0.75em面包屑项水平内边距此前面包屑项的内边距是写死的v0.7.0 起垂直 / 水平方向可分别调整。sass/components/message.sass变量名默认值作用$message-body-border-color$border消息体左侧色条颜色$message-body-border-width0 0 0 4px消息体左侧色条宽度仅左侧 4px$message-header-weight$weight-bold消息头字重$message-header-body-border-width0头部与正文之间的边框宽度这组变量把.message的左侧彩色指示条经典 Bulma 消息样式拆成了颜色 / 宽度两个独立维度0 0 0 4px即只有左边有 4px 边框。sass/components/navbar.sass变量名默认值作用$navbar-box-shadow-size0 2px 0 0导航栏阴影尺寸$navbar-box-shadow-color$background导航栏阴影颜色$navbar-padding-vertical1rem导航栏垂直内边距$navbar-padding-horizontal2rem导航栏水平内边距$navbar-z30导航栏 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-height1.125.title行高$subtitle-line-height1.25.subtitle行高$subtitle-negative-margin-1.25rem.subtitle的负上边距$subtitle-negative-margin是 v0.7.0 的关键排版变量当.subtitle紧跟.title之后它用负 margin 把副标题拉回更紧凑的位置替代了此前标题副标题组合里写死的间距。被移除的变量Removed variablesv0.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.sassv0.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当前默认32pxinitial-variables.scss断点公式960px 2 * $gap等保持不变说明 v0.7.0 将其翻倍到64px的实验在后续版本被回调$hr-height: 2pxv0.7.0 的 2px 决定被保留至今generic.scss且背景色取值方式升级为从 CSS 变量读取$message-body-border-color/$message-body-border-width替代被移除的$message-body-border仍是 message 组件的现行变量message.scssbreadcrumb / 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），仅供参考