今天連假最後一天了，發現真的沒梗了慘囉，所以可能後面幾天真的會爛尾，為了補齊後面的天數，不過哀桑今天也是要繼續比完比賽，下面的內容今天都是短短我們就直接進入範例吧，感覺今天直接看mixin名稱好像也知道作用是怎樣，感覺就是講寫css，所以真的確定富奸囉果斷不說明囉，因為基本上就是自己要先理解css原理，這邊提供一些scss寫法，我們可以把把這些常用管理在自己的mixin檔搭配之前快速鍵，這樣在新的專案啟動就可以繼續在使用囉。

//編譯前
@mixin fill-full-space {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.ex1 {
  @include fill-full-space;
}

@mixin flexbox-centering {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex2 {
  @include flexbox-centering;
}

@mixin clearFix() {
  &:before,
  &:after {
    content: '';
    display: table;
  }

  &:after {
    display: block;
    clear: both;
    height: 1px;
    margin-top: -1px;
    visibility: hidden;
  }
  & {
    *zoom: 1;
  }
}

.ex3 {
  @include clearFix;
}

//編譯後
.ex1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ex2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ex3:before, .ex3:after {
  content: "";
  display: table;
}
.ex3:after {
  display: block;
  clear: both;
  height: 1px;
  margin-top: -1px;
  visibility: hidden;
}
.ex3 {
  *zoom: 1;
}