# scss 變數 mixin

### mixin 共用屬性
如果有一些屬性需要一直重複使用，就可以考慮把他變成mixin。
舉例像按鈕的大小、寬高等等，這樣就可以被重複利用．

SCSS SYNTAX
@mixin btn_minxin {
  padding: 10px 20px;
  border:1px solid #eee
}

.btn{
    @include btn_minxin
}

在mixin內加入變數，可以加入預設值，或者自定義屬性
這樣btn-1會是預設的灰色，而btn-2則是自定義的藍色

@mixin btn_minxin($color:#eee) {
  padding: 10px 20px;
  border:1px solid #eee,
  background-color:$color
}

.btn-1{
    @include btn_minxin
}

.btn-2{
    @include btn_minxin(#4f8fd000)
}

進階用法，藉由按鈕模組來製作不同大小的按鈕、深色背景按鈕字的顏色以及hover後的效果。
這樣就會產生一組灰色的大按鈕、紅色的中按鈕、黃色的小按鈕，並且hover過去後都會加深70%的背景色

$color-red:#d74646;
$color-yellow:#ddc035;

＠minxin btn_mixin($color:#eee,$fontColor:black) {
    padding: 10px 20px;
    border:1px solid #eee,
    background-color:$color,
    color:$fontColor,
    &.lg{ padding:40px 20px }
    &.md{ padding:20px 10px }
    &.sm{ padding:10px 20px }
    &:hover{ backgrond-color:darken($color,7)}
}

.btn-1.lg{ @include btn_minxin }
.btn-2.md{ @include btn_minxin($color-red) }
.btn-3.sm{ @include btn_minxin($color-yellow) }

###### tags: `scss`