• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Bulma 定制开发

CSS3 web前端中文站 2年前 (2017-10-23) 1640次浏览 已收录 0个评论

前面给大家介绍了Bulma 的相关基础知识,如《?BULMA 文字、颜色、字体》,《BULMA 框架教程》,《BULMA 响应式布局》。这个部分是高级内容,讲解如何定制 Bulma,也就是修改默认样式。Bulma 采用 Sass 语法(注意,不是 Scss 语法),所以定制的样式也必须使用 SASS。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Bulma 定制开发
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址