# 了解 @mixin 的世界
###### tags: `前端(frontend)` `scss` `@mixin`

了解 @mixin 之前，先了解幾個基本知識

1. 變數前要加$
2. 當有大量重覆使用到某種屬性時可使用
3. @mixin 要使用@include 載入

<font color="#f00">請觀察編譯後的CSS</font>

:::info
@mixin的寫法：
@mixin 接一個自行取的名稱 (小括號裡設變數名稱:可設定預設值，若有多個變數以,分隔){
屬性:變數;
}

@mixin size($w:100px, $h:100px,$bg:#777) {
  width: $w;
  height: $h;
  background-color:$bg;
}

.box1 {
  @include size;
}

.box2 {
  @include size(150px, 150px, #345);
}

:::

:::info
CSS

.box1 {
  width: 100px;
  height: 100px;
  background-color: #777;
}

.box2 {
  width: 150px;
  height: 150px;
  background-color: #345;
}

:::

### 有沒有發現以下2點：
### box1 @include size後面若沒有接參數，即是預設值
### box2 @include size後面若有接參數，則預設值將被覆蓋