###### tags: `六角筆記王`

# @mixin @include

* 要注意的是 **@mixin** 必須和 **@include** 來使用
* @mixin來設定要使用的樣式、@include則是套用樣式

1. @mixin 指令建立設定

@mixin size {
  width: 50px;
  height: 50px;
}

2. 載入 @mixin 可使用套入 @include 指令

.box {
  @include size;
  background-color: blue;
}

3. 編譯結果

.box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

簡言之，把重複的樣式利用 @mixin 建立 mixin 樣式，需要時就直接用 @include 將 mixin 的樣式載入到區塊內

方便的功能是使用 & 符號來代替父層

---

.box{
  color: rgba(0, 0, 0, 1);
  &:hover{
      color: red;
  }
}

編譯後
=====>

.box{
  color: rgba(0, 0, 0, 1);
}
.box:hover{
  color: rgba(255, 0, 0, 1);
}

---

參考文章
[Sass / SCSS 預處理器 - @mixin 建立混入與 @include 載入混入](https://awdr74100.github.io/2020-05-30-scss-mixin-include/)
[Day02::方便又好用的SCSS](https://ithelp.ithome.com.tw/articles/10190746)