[Day 18] Sass - Mixins

@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
看到更多有趣的用法喔！