sass override bootstrap var

$grid-columns: 24;
$grid-gutter-width: 30px;


$body-bg: #ffffff;

$brand-primary: #394a5c;
$brand-success: #87c599;

類似這樣，可以輕易的把 grid 改成 24 欄，也可以重新定義基本色和 margin, padding 等等，對於要做theme 是很實用的技巧

bootstrap include grid

有時候會想要做到 include column 到自定義的 css class 裡面，可以這樣做：

```
@import "bootstrap";

.app {
  @include make-row();

  div {
    border: solid 1px;
  }
}

.main {
  @include make-lg-column(8);

  div {
    border: solid 1px;
  }
}

.sidebar {
  @include make-lg-column(4);
}

.market {
  .market-title {
    @include make-lg-column(8);
  }
  .market-ticker {
    @include make-lg-column(4);
  }
}
```

整理 SASS 的方法

教了很多整理 SASS 的方法，主要是用 mixins

https://www.toptal.com/css/sass-mixins-keep-your-stylesheets-dry

偷懶也可以直接使用 Sass mixin libraries，例如文中提到的 bourbon 和 andy

http://bourbon.io/
http://gillesbertaux.com/andy/

SASS 做 theme 的起手式

不錯的文章

* 最外層的 container 控制 theme 基本元素
* 加上 themable 的 mixin 並設參數讓 theme 更彈性
* 用 each 方法 loop 參數，讓 themable 更彈性，只需要接受 name 和 map 兩個參數
* lighten & darken 方法做到 hover 效果


https://www.toptal.com/sass/theming-scss-tutorial