@mixin指令介紹

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

@Mixins的定義及使用

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

@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就如下所示

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

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

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

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

@include link;

在CSS直接被解析成

a {
    color: blue;

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

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

參數的使用

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

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

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

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

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

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

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

@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調用時沒有傳遞參數，會收到一個編譯錯誤的提示，為了不讓這個問題發生，通常我們會給它設定一個默認值

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

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

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

數量可變的參數

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

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

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

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

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

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

總結

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