介紹完了前幾天的 sass 各種用法，大家有沒有覺得有些方法好像很類似？

像是 mixin 跟 extend，兩個都是預先寫好，再引入使用的做法。

差別只在於 mixin 可以使用參數，那我們要怎麼判對何時該使用哪種方法呢？

使用時機

extend

把重複的東西整理起來，而且屬於同一類型的東西，像是基礎的 button 該有多少 padding，字型大小該多大。針對統一的『樣式』去繼承所有基本內容。

// extend.sass
%fish-size
    min-width: 20px
    min-height: 10px
    color: yellow
    margin: 20px
    font-style: italic

.normal-fish
    @extend %fish-size
    color: red
.fat-fish
    @extend %fish-size
    color: green
    font-size: 120px
    padding-right: 20px

.small-fish
    @extend %fish-size
    font-size: 10px
    padding-left: 20px

// 各種魚繼承了基本大小跟顏色等樣式，再各自去延伸特色

mixin

過參數彈性地去運用已經寫好的 css ，設定統一的數值來管理 property，例如設定一個字型 mixin，當其他 css 透過這個字型 mixin 去套用時，可以依據字型來判斷要顯示的大小，類似一個工廠，把材料丟進去後做一些運算，來符合我們要的結果

// mixin.sass
$primary-dark: #232323
$primary-gray: #808080
$danger-color: #d31313

@mixin DarkMode($theme:$primary-dark)
    background: $theme
    font-size: 50px
    margin: 10px

.info
    @include DarkMode()
.success
    @include DarkMode($theme: $primary-dark)
.warning
    @include DarkMode($theme: $primary-gray)
.danger
    @include DarkMode($theme: $danger-color)

//當參數不同時，我們也能在 mixin 中去依照參數去挑整要顯示的 style

總結來說，當你的 css 有需要因地制宜的時候，選 mixin 。當你的 css 是某項類別的基礎或延伸時，選 extend ，我的理解大概是 John :D

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？