使用 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个属性设置在容器上。

1. flex-direction：默认值 row，表示项目在水平方向、从左向右排列。
2. flex-wrap：默认值 nowrap，表示项目在水平方向排列时，不论有多少，都不换行。这样太固执了，你可以设置为 wrap，这样在水平空间不够时，后面的项目就会自动换行了。
3. flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值你可能会想到—— row nowrap。非必要时，不设置这个属性，单独设置上面的两个属性会好些。
4. justify-content：项目水平方向上的对齐方式，默认 flex-start，左对齐。还可取值 center，表示居中对齐。
5. align-items：项目垂直方向上的对齐方式，默认 stretch，在项目未设置高度或设为 auto，项目将占满整个容器的高度。
6. align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。默认 stretch，跟 align-items 默认情况差不多，不过这里是多行项目占满整个容器的高度。

2.3 项目的属性

1. order：项目的排列顺序，默认为 0。数值越小，排列越靠前。
2. flex-grow：项目的放大比例，默认为 0，总是不放大。如果属性值都为 1，项目将等分剩余空间（如果有的话）。
3. flex-shrink：项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
4. flex-basis：项目占据的水平方向上的宽度（在分配多余空间之前）。默认值为 auto。可以设为跟 width 属性一样的值（比如 350px），则项目将占据固定空间。
5. flex：是 flex-grow， flex-shrink 和 flex-basis的简写形式，默认值为0 1 auto。后两个属性可选。
6. 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 布局

1. http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2. http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

4.2 SASS

1. http://www.ruanyifeng.com/blog/2012/06/sass.html
2. http://sass-lang.com/documentation/file.SASS_REFERENCE.html

（完）