六、定制

最后这个部分是高级内容，讲解如何定制 Bulma，也就是修改默认样式。Bulma 采用 Sass 语法（注意，不是 Scss 语法），所以定制的样式也必须使用 SASS。

首先，克隆或下载源码。

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

然后，安装依赖。

  2. $ cd bulma
  3. $ npm install

接着，在源码的根目录里面，新建一个app.sass文件，定制的代码都写在这个文件。在它里面，先引入 Bulma 基础变量。如果需要的话，可以改掉。

  2. @import "./sass/utilities/initial-variables"
  4. $blue: #72d0eb
  5. $pink: #ffb3b3
  6. $family-serif: "Merriweather", "Georgia", serif

上面代码中，预设的blue、pink和family-serif变量被改掉。

有一些 Bulma 变量是从基础变量衍生的，需要的话也可以改掉。

  2. $primary: $pink

上面代码中，主色调改成了pink变量。

接着，在这个文件里面加载 Bulma 的入口脚本。

  2. @import "./bulma"

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

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

最后，打开package.json，找到下面这一行。

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

把里面的bulma.sass改成app.sass。

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

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