使用 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
（完）
