> 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時設置默認值來防止編譯錯誤，同時也可以在調用時覆蓋默認值，甚至還可以更加靈活的傳遞數量可變的參數。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tobyisme.gitbook.io/sass/mixin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.