剩下8天囉明天上完班就準備放假囉，不過還是要默默要寫鐵人賽可怕～慘，今天還跟同好寫程式的小夥伴還在嘴明年要不要報雙主題，今天的鐵人寫到一半發現確定要這樣自虐嗎，單主題寫到後面真的快要沒梗囉，希望明年我們會一起撞到頭殼一起報名XD，好了不廢話囉直接進入今天主題。

//編譯前
@mixin colpx($num) {
  //設定要用多少個欄位及間距
  $grids: (
    columns: 12,
    gutter: 10px,
  );
  $column: map-get($grids, columns); // 畫面中要分12格
  $col: (100% / $column); // 100% / 每一欄位的要使用寬度
  $gutter: map-get($grids, gutter); // 5px 左右兩邊的總留白
  display: flex;
  width: calc(#{$col * $num} - #{$gutter}); // 欄位寬度 * 要幾欄 - 留白
  margin-left: $gutter / 2;
  margin-right: $gutter / 2;
}

//利用迴圈方式帶入1-12
@for $index from 1 through 12 {
  .col-#{$index} {
    @include colpx($index);
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
}

//編譯出來的結果
.col-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(8.33333% - 10px);
  margin-left: 5px;
  margin-right: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.col-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(16.66667% - 10px);
  margin-left: 5px;
  margin-right: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.col-3...

今天的範例就是通常我們會需要使用不同欄位，最早以前通常我們可能都是使用複製貼上，貼了.col-1到.col-12的css的樣式然後慢慢再依序修改width的寬度的數據，不過一來這樣我們如果只是做12格，一種裝置，感覺好像不會說痛苦到哪邊頂多說12個，不過這時候如果有不同裝置大小像bootstrap有桌機平板手機不同裝置要用，哇～如果要這樣用，使用三個裝置如平板手機桌機，一算我們要更改36個真的會吐，加上我們只有切成12格如果要切成24格真的更寫到吐，所以這時候我們利用回圈方式帶入設定好的mixin，這時候我也不會一個一個修改到吐，也不會改到眼花，可以說這時候我們用scss迴圈跟mixin這樣優勢就會出來，就可以使用我們自訂格線的用法，今天我又順利騙完一天內容囉（Ｘ，就不用引入像bootstrap這樣大包東西，也可以使用格線開心。