使用 Bulma
一、起因
最近我在学习 SASS,通过它,可以将 CSS 像编程语言一样书写。
在最近之前,我又学习了 Flex 布局,用起来很方便。
所以,我学习了 Bulma 这个纯 CSS 框架——使用 Flex 布局(浏览器支持 IE10+),源码使用 SASS 编写。
在开始进入 Bulma 学习之前,先对“Flex 布局”和“SASS”的概念进行介绍。
二、Flex 布局
2.1 基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。
.box {
display: flex;
}
容器的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
2.2 容器的属性
以下6个属性设置在容器上。
- flex-direction:默认值 row,表示项目在水平方向、从左向右排列。
- flex-wrap:默认值 nowrap,表示项目在水平方向排列时,不论有多少,都不换行。这样太固执了,你可以设置为 wrap,这样在水平空间不够时,后面的项目就会自动换行了。
- flex-flow:是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值你可能会想到—— row nowrap。非必要时,不设置这个属性,单独设置上面的两个属性会好些。
- justify-content:项目水平方向上的对齐方式,默认 flex-start,左对齐。还可取值 center,表示居中对齐。
- align-items:项目垂直方向上的对齐方式,默认 stretch,在项目未设置高度或设为 auto,项目将占满整个容器的高度。
- align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。默认 stretch,跟 align-items 默认情况差不多,不过这里是多行项目占满整个容器的高度。
2.3 项目的属性
- order:项目的排列顺序,默认为 0。数值越小,排列越靠前。
- flex-grow:项目的放大比例,默认为 0,总是不放大。如果属性值都为 1,项目将等分剩余空间(如果有的话)。
- flex-shrink:项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。
- flex-basis:项目占据的水平方向上的宽度(在分配多余空间之前)。默认值为 auto。可以设为跟 width 属性一样的值(比如 350px),则项目将占据固定空间。
- flex:是 flex-grow, flex-shrink 和 flex-basis的简写形式,默认值为0 1 auto。后两个属性可选。
- align-self:个性化“align-items”,即允许单个项目有与其他项目不一样的对齐方式,可覆盖父元素 align-items 属性设置。
三、SASS
SASS 是 "CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
原生 CSS 代码很难重用也无法进行数学运算,SASS 提供了这些功能。下面介绍它的基本用法。
3.1 变量
SASS允许使用变量,所有变量以$开头。
$blue : #1875e7
div
color : $blue
如果变量需要镶嵌在字符串之中,就必须需要写在 #{}
之中。
$side : left
.rounded
border-#{$side}-radius: 5px
3.2 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
div h1 {
color: red
}
可以写成:
div
hi
color: red
在嵌套的代码块内,可以使用 &
引用父元素。比如 a:hover
伪类,可以写成:
a
&:hover
color: #ffb3ff
3.3 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */
,会保留到编译后的文件。
单行注释 // comment
,只保留在 SASS 源文件中,编译后被省略。
在 /*
后面加一个感叹号(!
),表示这是“重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
3.4 Mixin
Mixin 是可以重用的代码块。使用 @mixin
命令,来定义这样一个代码块。
@mixin left
float: left
margin-left: 10px
使用 @include
命令,调用这个 mixin。
div
@include left
mixin 的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px)
float: left
margin-right: $value
使用的时候,根据需要加入参数:
div
@include left(20px)
给 Mixin 传递内容块,举个例子:
@mixin apply-to-ie6-only
html
@content
@include apply-to-ie6-only
#logo
background-image: url(/logo.gif)
会被编译为
* html #logo
background-image: url(/logo.gif)
这种语法在 Bulma 中被使用,用在对特定元素在不同的媒体查询情况下的样式设定。
3.5 插入文件
@import
命令,用来插入外部文件。
@import "path/filename.sass"
// 或者
@import "path/filename"
如果插入的是 .css
文件,则等同于 CSS 的 import
命令。
@import "foo.css";
3.6 自定义函数
SASS 允许用户编写自己的函数。
@function double($n)
@return $n * 2
#sidebar
width: double(5px)
四、深入学习
4.1 Flex 布局
- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
4.2 SASS
- http://www.ruanyifeng.com/blog/2012/06/sass.html
- http://sass-lang.com/documentation/file.SASS_REFERENCE.html
(完)
使用 Bulma的更多相关文章
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
- Bulma - 基于 Flexbox 的现代化的 CSS 框架
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...
- bulma入门
http://www.ruanyifeng.com/blog/2017/10/bulma.html
- Bulma 源码解析之 .columns 类
{说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow. .columns // 修饰类 &.is-centered justify-content: cente ...
- Bulma 源码解析之 .container 类
Bulma 的 .container 类是这样实现的. .container position: relative // 不设置桌面以下设备的 container +desktop margin: 0 ...
- Bulma 中的媒体查询
在 Bulma 中将设备分为 6 类:手机.平板.触屏设备.桌面.宽屏和大屏.提供了四个阈值. // sass/utilities/variables.sass $tablet: 769px !def ...
- Bulma 源码结构
源码基于 Bulma 0.4.0 版本. 一.入口文件 bulma.sass bulma.sass 是 Bulma 使用 SASS 编译的入口文件. sass bulma.sass css/bulma ...
- CSS、Bulma介绍
文章目录 一.序章 二.CSS 基础 1. CSS 介绍 2. CSS 语法 3. CSS常用元素 1.颜色 2.字体大小 3.宽高 4.盒模型(单独拿出来讲) 5.背景 4.1样式和内容分离 4.2 ...
- Bulma CSS - 响应式
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...
随机推荐
- grpc asp.net core 集成时一些配置的说明
一 什么是grpc google出了一款分布式通讯框架:grpc.我想这也不是新的东西了,在13年的一个项目中,用在了数据层和业务端之间的通讯上,当时并没有觉得怎么样,因为wcf很轻松的也可以可以实 ...
- Httpclient远程调用WebService示例
我们将Web Service发布在Tomcat或者其他应用服务器上后,有很多方法可以调用该Web Service,常用的有两种: 1.通过浏览器HTTP调用,返回规范的XML文件内容 2.通 ...
- win8.1系统相关
win8.1系统相关 信息时代,系统更新速度非常快,十一月初,同事在网上花5元买了一个win8.1系统激活码,之后两周,我电脑由于系统故障,准备重装系统,借助他的系统,但无法激活,借用他购买的账号也不 ...
- 执行.class文件
java packageName.className即可 但是注意,如果是有包的,这段指令一定是packageName的上层目录(即bin目录)执行!
- git ssh登录
.ssh下创建config文件 其内容: Host ipIdentityFile ~/.ssh/私钥文件名Port 22User git服务器的账号,不是git账号名(私钥文件名才是git账号名) 注 ...
- ABP 学习系列 - 目录
一.ABP 学习系列 - 入门介绍之单表 http://www.cnblogs.com/yabu007/p/8067694.html 二.ABP 学习系列 - 入门介绍之多表 http://www.c ...
- ucos ii 百度官方介绍
μC/OS II(Micro-Controller Operating System Two)是一个可以基于ROM运行的.可裁剪的.抢占式.实时多任务内核,具有高度可移植性,特别适合于微处 ...
- 机器学习:集成学习(集成学习思想、scikit-learn 中的集成分类器)
一.集成学习的思想 集成学习的思路:一个问题(如分类问题),让多种算法参与预测(如下图中的算法都可以解决分类问题),在多个预测结果中,选择出现最多的预测类别做为该样本的最终预测类别: 生活中的集成思维 ...
- GUI练习中
总结:JFrame和Frame是有很大差别的. 不要混淆.否则方法是不能成功调用的 特别是背景色:JFrame.对象f在main里无法调用背景色前景色都不想显示 一下是书上的一段代码,编译错误,但是可 ...
- Lib之过?Java反序列化漏洞通用利用分析
转http://blog.chaitin.com/ 1 背景 2 Java反序列化漏洞简介 3 利用Apache Commons Collections实现远程代码执行 4 漏洞利用实例 4.1 利用 ...