直接改$primary变量无效，是因为必须在@import Bulma前声明变量；CDN版本不支持Sass变量覆盖；CSS变量仅影响部分样式，派生色需同步重定义$primary-invert等整套变量。
直接改 $primary 变量却没生效？那大概率是变量声明顺序错了，或者你用的是 CDN 版本——它不支持 Sass 变量覆盖。
为什么改了 Sass 变量颜色还是不变？
Bulma 的颜色和断点都定义在 Sass 源码里，但变量有作用域和编译时序限制。你在 @import "bulma" 之后才写 $primary: #ff6b6b;，等于白写——Sass 不会回溯覆盖已赋值的变量。
- 必须在
@importBulma 前声明所有要覆盖的变量，例如$primary、$breakpoint-mobile - CDN 引入的
bulma.min.css是编译好的成品，无法运行时修改 Sass 变量 - 如果项目用 Vite/Webpack + Sass，确保你 import 的是
bulma/sass/utilities/_all.sass或完整源码，而不是预编译 CSS
自定义断点：从 is-mobile 失效说起
Bulma 默认断点是硬编码的：$breakpoint-mobile: 769px（注意不是 768），所以加 is-mobile 类只在 ≥769px 才触发响应式堆叠。想让它在 640px 就换行？得重定义这个变量。
- 在
@import前设置：$breakpoint-mobile: 640px;，同时建议一并覆盖$breakpoint-tablet、$breakpoint-desktop保持一致性 - 改完后，
.columns.is-mobile会在 ≤640px 屏幕下自动堆叠，不用再手动写媒体查询 - 注意：Bulma 的
is-mobile不是“移动端优先”，而是“在 mobile 断点及以上启用 flex 换行”，这点容易误解
用 CSS 变量覆盖主题色（适合 CDN 用户）
如果你用 CDN 或没法改 Sass 编译链，CSS 变量是唯一可行路径。Bulma 从 0.9.0 起支持部分 CSS 变量，但仅限基础色系，且需手动注入根作用域。
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 的
<head>或全局 CSS 中写：:root { --primary: #5d4037; --link: #8d6e63; --info: #42a5f5; } - 这些变量只影响 Bulma 内部使用
var(--primary)的地方（如.button.is-primary、.navbar.is-primary），不会自动同步到$primary衍生出的阴影、边框等 - 像
.input边框色、.textareafocus outline 这类依赖 Sass 计算的颜色，CSS 变量无效，仍需 Sass 重编译
别漏掉衍生样式：按钮边框、输入框焦点、悬停态
只改 $primary 不等于主题就统一了。Bulma 很多组件颜色是派生计算的，比如 $primary-invert（用于文字反色）、$primary-light（用于背景）、$primary-dark（用于 hover）。
- 推荐一次性声明整套变量：
$primary、$primary-invert、$primary-light、$primary-dark，否则按钮文字可能变成白色压在浅色背景上，看不见 - 断点相关变量也要配对改：
$gap、$block-spacing等会影响.section、.container的留白，和断点协同工作 - 最稳妥的做法：fork 官方
bulma/sass/generated/colors.sass，把生成逻辑抄进自己变量文件，避免色值脱节
真正麻烦的不是改一个变量，而是所有依赖它的派生值是否同步更新——尤其是当设计稿要求精确的灰阶阶梯或品牌色禁用亮色时，光靠 is-primary 类远远不够。
