Bulma 定制

Bulma 是一个轻量级、可定制的纯 CSS 框架。因为没有 JavaScript 所以可以在任何开发环境中轻松实现。所有样式都基于 class，只需为 html 元素指定 class，样式立刻生效。目前没有发现比较完整的中文文档，关于 Bulma 的定制，我查找了一些资料，做个笔记。

Bulma 采用 Sass 语法（注意，不是 Scss 语法），所以定制的样式也必须使用 Sass。

https://bulma.io

一、克隆或下载源码

1
$ git clone https://github.com/jgthms/bulma.git

二、安装依赖

1
2
$ cd bulma
$ npm install

三、新建 sass 文件

在源码的根目录里面，新建一个 例如 mybulma.sass 的文件，定制的代码都写在这个 sass 文件中。在 style.sass 里面，首先引入 Bulma 基础变量，然后就可以重新定义变量了。

1
2
3
4
5
6
@import "./sass/utilities/initial-variables"

$blue:  #72d0eb
$pink:  #ffb3b3
$ocean: #1e3e3f
$family-serif: "Merriweather", "Georgia", serif

例如上面代码中，预设的 $blue、$pink 和 $family-serif 变量被改掉，并且新增了 $ocean。有一些 Bulma 变量是从基础变量衍生的，需要的话也可以改掉。

1
$primary: $ocean

例如上面代码中，$primary 主色会被改为新增的 $ocean 颜色值为： #1e3e3f。

接着，在这个文件里面引入 Bulma 的入口脚本：

1
@import "./bulma"

这一行之后，就可以写自己的样式了，比如为所有标题加一个下划线：

1
2
3
.title {
  text-decoration: underline;
}

四、修改 package.json

打开 package.json 找到下面这一行：

1
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",

把里面的 bulma.sass改成 mybulma.sass ：

1
"build-sass": "node-sass --output-style expanded --source-map true mybulma.sass css/bulma.css",

修改完样式，运行一下 npm run build，就会生成自己定制的样式表 css/bulma.css 了。