Bulma 定制开发

HTML5 herman 679浏览 0评论

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

Bulma 定制

首先,克隆或下载源码。

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

然后,安装依赖。

$ cd bulma
$ npm install

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

@import "./sass/utilities/initial-variables"

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

上面代码中,预设的blue、pink和family-serif变量被改掉。
有一些 Bulma 变量是从基础变量衍生的,需要的话也可以改掉。

$primary: $pink

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

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

@import "./bulma"

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

.title {
  text-decoration: underline;
}

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

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

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

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

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

好了就讲到这里,更多内容请移步到官方进行学习。https://bulma.io

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Bulma 定制开发