Bulma 入门实战：662KB 的 CSS 文件，从引入到换色 10 分钟跑通
【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma
新建项目想给页面套一套现成的样式，又不想被一堆 JavaScript 绑架。Bulma 就是这么个东西：纯 CSS、基于 Flexbox 的现代前端框架，整包只有一个bulma.css，零 JS 依赖。这篇文章带你走完"怎么装进来 → 怎么改成自己项目的颜色 → 怎么确认改对了"这条最短路径，全部用仓库里现成的文件和数字说话。
先把文件引进来：一条 link 就够
最快的一步，在<head>里加一行：
<link rel="stylesheet" href="css/bulma.min.css">刷新页面，写一个<button class="button is-primary">，看到青绿色的圆角按钮，就算装好了。此时别急着改样式，先打开浏览器的网络面板（Elements 里看 Computed 也行），你会看到一个事实：整个框架的全部规则——按钮、表格、表单、导航栏、响应式断点——都在这一个文件里，而且没有任何bulma.js之类的东西。
这也是 Bulma 和很多框架最大的区别：它只是样式层，不碰你的逻辑，"环境无关"是写在 README 里的设计原则，所以它几乎不可能和你的 Vue/React 代码打架。
用哪份文件：先看体积再选
仓库 css/ 目录下其实备了 5 份编译产物，不是只有一份：
| 文件 | 压缩后大小 | 少了什么 |
|---|---|---|
| bulma.min.css | 662 KB | 完整版，含 helper 类和深色模式 |
| bulma-no-helpers.min.css | 462 KB | 全部 helper 类（has-text-*、is-flex等） |
| bulma-no-dark-mode.min.css | 542 KB | prefers-color-scheme暗色规则 |
| bulma-no-helpers-prefixed.min.css | 498 KB | 无 helper 且类名带前缀 |
| bulma-prefixed.min.css | 710 KB | 全部类名加bulma-前缀 |
如果你的项目只写组件类名、从来不用 helper，换用no-helpers版本就能把传输量砍掉 25% 以上，一行不用改。
前缀版适合 Bulma 和另一个 UI 库共存的场景，两边类名不会撞车；代价是文件反而变大一点。
换成自己的品牌色：写一个 scss 文件重编译
默认的青绿色只是示例主题，产品色得自己定。Bulma 1.0 用 Sass 变量驱动，入口是 bulma.scss，颜色、字号、间距都来自 initial-variables.scss。步骤按顺序来：
npm install sass bulma在 package.json 的scripts里加一行构建命令，照官方文档的写法：
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css"然后新建一个my-bulma-project.scss，用@use ... with覆盖变量：
$purple: #8a4d76; $beige-light: #d0d1cd; @use "bulma/sass" with ( $primary: $purple, $link: $beige-light );跑npm run build-bulma，把生成的my-bulma-project.css链进页面。现象很直观：之前青绿色的按钮和链接，现在变成了你的品牌色。只改$primary就只换按钮主色，$link单独管链接文字。完整示例可以对照 with-sass.html 文档。
不重编译改主题：1.0 的 CSS 变量
上面这套要重编译，Bulma 1.0 又留了条后路：样式编译后全部输出成--bulma-*前缀的 CSS 自定义属性（见 css-variables.scss）。也就是说，打开开发者工具，直接在页面里改--bulma-link的值，颜色立刻变，不用碰 Sass。线上想给用户开个"换色"开关，改的就是这一层变量；想一次性定制整套主题，还是走上面的 Sass 流程。两条路不冲突。
这套东西对机器没有任何要求：没有 Node 服务、没有构建依赖之外的东西，npm install sass bulma在任何开发机上秒装，编译产物扔到任意静态服务器上就能跑，浏览器支持 IE10（部分）到所有现代浏览器。想确认某个组件到底有哪些类名，直接翻 docs/documentation/ 里的示例页面，每个组件都配了可复制的 HTML。
【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
