什麼是Mixin呢？

有點像js的function 先寫好function a在在別的地方呼叫function a 當然a裡面會寫好方法 別的地方就可以直接使用

混合(Mixin)有點像是個函式或是一群值的組合，也可以輸入一個值然後套用這個值的整串結果，經常用於需要相符不同瀏覽器品牌的CSS3宣告上，來解決供應商前綴字的問題，例如以下的範例:

開始使用Mixin

coolColor 是他的名子

裡面可以放一些變數 之後我們可以呼叫他之後做什麼事情

帶值進去 $radius

//建立border-radius 這個mixin 在.box這個class include 直接引用建立border-radius 這個mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

寫好之後要應用 在要應用的clsss裡面 使用include （裡面帶$radiu對應的值）

要記住的是@minix標記需要對應到@include標記，上面的@include border-radius(10px)可以像變數一樣，加在scss檔案中的任一個定義中。

這個mixin中的定義傳入值，是可以加上預設值的，例如以下的範例:

.box { @include border-radius(10px); }

css寫法

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

直接帶預設值的寫法

@mixin label($text: 'Code', $background: yellow, $color: rgba(black, 0.5)) {
  position: relative;
  &:before {
    background: $background;
    color: $color;
    content: $text;
    display: inline-block;
    font-size: .6rem;
  }
}
.p { @include label(); }

Mixin 模組化的概念 先寫好在應用

$size $line $align 有很多的變數？？

可以透過Mixin 把一些重複的css把他模組化 然後可以在別的地方要使用時 帶入變數去呼叫他 這樣就可以讓css更簡潔

混合(Mixin)經常被使用，在大部份時候如果你需要整個群組或整個類別的CSS套用，主要都是使用它，因為CSS3很多新的定義都會有供應商前綴字的問題，網路上也有很多現成的混合庫可以使用，例如以下三種常見的函式庫，但這裡面也不只有混合(Mixin)而已，還有很多其他的內容，直接使用可以節省時間，三種基本上都使用gem來安裝:

results matching ""

    No results matching ""