> For the complete documentation index, see [llms.txt](https://tobyisme.gitbook.io/sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tobyisme.gitbook.io/sass/mixin.md).

# @mixin指令介紹

### *Mixins可以包含任意内容且可以傳遞參數，因此比'@extend'更加靈活和强大。*

## @Mixins的定義及使用

首先我要先把兩個待會會重複使用到的樣式定義成mixins模塊

```css
@mixin button {
    font-size: 1em;
    padding: 0.5em 1.0em;
    text-decoration: none;
    color: #fff;
}
@mixin link {
    a {
        color: blue;

        &:visited {
            color: purple;
        }
        &:hover {
            color: white;
        }
        &:active {
            color: red;
        }
    }
}
```

解析後的CSS就如下所示

```css
.button-green {
    font-size: 1em;
    padding: 0.5em 1.0em;
    text-decoration: none;
    color: #fff;
    background-color: green;
}
```

在定義mixin的時候也可已包含其它的mixin

```css
@mixin button-blue {
    @include button;
    @include link;
}
```

剛剛一開始新定義的`@mixin link`雖然是一層包一層但是依舊是可以直接被調用的

```css
@include link;
```

在CSS直接被解析成

```css
a {
    color: blue;

    &:visited {
        color: purple;
    }
    &:hover {
        color: white;
    }
    &:active {
        color: red;
    }
}
```

前提是這個模塊必須包含了選擇器也包含了樣式，如果我們今天直接`@include button`就解析不出東西來

## 參數的使用

Mixins可以接收和使用參數，這使得它比`@extend`更加強大和靈活。以下我針對一開始的`button`模塊增加了名為`background`的參數並將其傳遞給模塊。

```css
@mixin button($background) {
    font-size: 1em;
    padding: 0.5em 1.0em;
    text-decoration: none;
    color: #fff;
    background: $background;
}
```

接下來我們來做一個綠色的按鈕吧，直接傳遞green的參數給它就行囉

```css
.button-green {
    @include button(green);
}
```

CSS解析出來就會變成以下那樣

```css
.button-green {
    font-size: 1em;
    padding: 0.5em 1.0em;
    text-decoration: none;
    color: #fff;
    background: green;
}
```

當然這種傳遞參數一次不只可以傳一個，參數間用逗號隔開，可以傳大量!!!!

```css
@mixin button($background, $color) {
    font-size: 1em;
    padding: 0.5em 1.0em;
    text-decoration: none;
    color: $color;
    background: $background;
}

.button-green {
    @include button(green, #fff);
}
```

但是這種傳遞參數的設定有個問題，就是當你在`@include`調用時沒有傳遞參數，會收到一個編譯錯誤的提示，為了不讓這個問題發生，通常我們會給它設定一個默認值

```css
@mixin button($background: green) {
    font-size: 1em;
    padding: 0.5em 1.0em;
    text-decoration: none;
    color: #fff;
    background: $background;
}
```

還有就是為了幫助你的代碼更加容易理解，你可以在傳遞值給mixin時將參數名稱和參數值一併傳遞過去

```css
.button-green {
    @include button($background: green, $color: #fff);
}
```

## 數量可變的參數

Mixins可以接收未知數量的參數，以下我用`box-shadows`來做解釋，新增兩層陰影

```css
.container {
    box-shadow: 0px 1px 2px #333,
                2px 3px 4px #ccc;
}
```

接下來開始定義mixin，重要的點就是參數那邊後面要加上三個點(...)，這很重要，加上它，你就可以任意變更你要放多少參數進去，可多可少

```css
@mixin box-shadows($shadow...) {
    box-shadow: $shadow;
}

.container {
    @include box-shadows(0px 1px 2px #333, 2px 3px 4px #ccc);
}
```

參數間用逗號隔開即可，就是這麼簡單，你想要幾層陰影都可以

## 總結

Mixins是一個在提高代碼重複使用率方面非常有用的指令，而且能夠使用和傳遞參數這一點使得它非常的強大，你可以在創建misins時設置默認值來防止編譯錯誤，同時也可以在調用時覆蓋默認值，甚至還可以更加靈活的傳遞數量可變的參數。