@mixin 與 @include
@mixin通常與@include一起使用，
@mixin用來定義需要重複使用的樣式，@include用來將@mixin的內容涵蓋進來。
我們通常把它用在一些“非真實意義”的clas樣式上，
這樣講有點繞口，舉例來說：
有時候我們會設一個class為“.reset-list”，裡面用來放一些在reset時會重複使用的樣式(非真實意義的class)，
這時就可以使用@mixin先將.reset-list中的樣式定義出來，
之後要用的時候再使用@include將@mixin內的樣式涵蓋進來～
話不多說，我們一起來看看吧！

//定義reset時會重複使用的樣式
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list; //horizontal-list中涵蓋reset樣式

  //horizontal-list內的li樣式
  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
} //將上述"horizontal-list樣式"、"horizontal-list內的li樣式"都一起涵蓋進來

來看看css會變怎樣

//nav ul涵蓋horizontal-list樣式，horizontal-list樣式又涵蓋了reset樣式
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
//nav ul涵蓋horizontal-list樣式，horizontal-list內還有li的樣式
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

當然，@mixin的用法不只如此，
如果有興趣的話，可以到
https://www.sasscss.com/documentation/at-rules/mixin
看到更多有趣的用法喔！