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 了。