撰寫 CSS 的時候,時常會遇到一種情況:

在開發多種 CSS 樣式時,會將第一次寫的程式碼複製貼上後,再進行修改,

日後樣式需要整個大修時(例:圓形改方形),又必須將所有 CSS 重新逐一修正,非常不方便。

使用 Sass @mixin 的話,上述的問題可輕鬆解決,同時還可傳入多個變數進去。

我們先來看下面的 code:

$font-size:13px /*設變數font-size*/
@mixin bg
    background: #000
    font-size: $font-size
.header
    +bg

編譯之後如下:

.header {
  background: black;
  font-size: 13px;
}

前面以@mixin 開頭,後面的 bg 則是命名要 mixin 的名稱。

所以如果.header 要載入的話,寫「+」後面接 mixin 名稱即可載入。

同時你也可以載入在外面的變數,當然也可以在裡面進行運算(加減乘除)。

再來假設背景顏色隨時會更動,你也可以在 mixin 建立變數:

$font-size:13px
@mixin bg($bgcolor) /*mixin 建立 bg 加入 bgcolor 變數*/
    background: $bgcolor
    font-size: $font-size
.header
    +bg(#000) /*變數設定#000*/
.content
    +bg(#fff) /*變數設定#fff*/

編譯後的結果如下:

.header {
  background: black;
  font-size: 13px;
}
.content {
  background: white;
  font-size: 13px;
}

@mixin 變數也可具有預設值,並載入多種變數:

@mixin bg($bgcolor:#000,$width:200px)
    background: $bgcolor
    width: $width
.header
    +bg
.footer
    +bg(#ff0000,300px)

編譯後

.header {
  background: black;
  width: 200px;
}
.footer {
  background: red;
  width: 300px;
}

透過變數載入的方式,就可以將樣式獨立出來,透過 @mixin 來進行集中管理與設計。

參考來源:30 天掌握 Sass 語法 - (6)利用 Sass「@mixin」,讓你省去重複撰寫相同 CSS 樣式的時間