大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 Bulma

Bulma is a modern CSS framework based on Flexbox.

Bulma 是一个基于 Flexbox 的现代 CSS 框架，唯一的输出就是一个 CSS 文件，即 bulma.css。

开发者可以开箱即用使用该文件，也可以下载 Sass 源文件来自定义变量。Bulma 不包含任何 JavaScript，因此可以被认为是与环境无关的 (Environment Agnostic)，只是逻辑之上的样式层。

Bulma 使用 autoprefixer 使大多数 Flexbox 功能与早期浏览器版本兼容。 根据 caniuse 的数据，Bulma 与 Chrome、Edge、Firefox、Opera、Safari 等最新版本的浏览器兼容，但是仅部分支持 Internet Explorer (10+)。

目前 Bulma 在 Github 通过 MIT 协议开源，有超过 48.4k 的 star、3.9k 的 fork、项目依赖量 244k、代码贡献者 370+、妥妥的前端顶级开源项目。

2.如何使用 Bulma

2.1 安装依赖

开发者可以使用 CDN 加载：

@import "https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css";

当然也可以使用 npm 或者 yarn 安装:

npm install bulma
// yarn
yarn add bulma

2.2 支持 CSS 变量

所有 Bulma 组件均使用 CSS 变量（也称为 CSS 自定义属性）来设置样式。例如，.title 元素的样式如下：

.title {
  color: var(--bulma-title-color);
  font-size: var(--bulma-title-size);
  font-weight: var(--bulma-title-weight);
  line-height: var(--bulma-title-line-height);
}

2.3 支持 Mixin

Bulma 还支持开发者使用 Sass mixins 来增强和方便 CSS 编写。虽然这些 mixins 主要在 Bulma 上下文中使用，但开发者也可以在自己的项目中重复使用。

.bulma-arrow-mixin {
  @include mixins.arrow(purple);
}

比如上面的 arrow() mixin 创建一个向下的箭头，而 $color 参数定义箭头的颜色。

2.4 支持主题

Bulma 还支持主题等常见 CSS 库的能力，比如在 Bulma 中，主题是 CSS 变量的集合，Bulma 有 2 个主题：

• light.scss（必需）
• dark.scss（可选）

由于 Bulma 需要所有 CSS 变量的默认值，因此它附带了一个位于 /sass/themes/light.scss 的默认浅色主题，同时还带有位于 /sass/themes/dark.scss 的深色主题。

:root {
    /* CSS Variables */
}
@media (prefers-color-scheme: light) {
  :root {
    /* CSS Variables */
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    /* CSS Variables */
  }
}
[data-theme=light],
.theme-light {
  /* CSS Variables */
}
[data-theme=dark],
.theme-dark {
  /* CSS Variables */
}

2.5 支持模块化

Bulma 由数十个 .scss 文件中定义的元素和组件组成，开发者可以使用 @use 关键字单独加载文件。但是为了正确加载目标文件的样式，需要同时加载主题定义的基本样式和 CSS 变量，比如下面的例子：

// 加载基本样式和主题
@use "bulma/sass/base";
@use "bulma/sass/themes";

// 加载其他 Bulma 组件
@use "bulma/sass/elements/button";
@use "bulma/sass/components/message";

更多关于 Bulma 的高级功能可以参考文末的资料，本文不再过多展开。

参考资料

https://github.com/jgthms/bulma

https://bulma.io/

https://www.youtube.com/watch?v=LBzZLzu2GKo

https://www.geeksforgeeks.org/bulma-introduction/

https://versions.bulma.io/0.7.5/expo/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox