一、起因
最近我在學習 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
（完）