使用Sass的@mixin指令實現自動新增瀏覽器字首

  解決每次打某些CSS3樣式需要加各種瀏覽器字首這一麻煩問題。

  目錄：

為什麼要加瀏覽器字首

  當一個瀏覽器實現一個新的屬性、值或者選擇器，而這個特徵還不是處於候選推薦標準狀態的時候，這屬性的前面會新增一個字首以便於它的渲染引擎識別。
  通俗一點來說，就是當官方標準還沒有最終確定之前，部分瀏覽器根據最初的草案實現了部分CSS樣式，然後使用自己的私有字首以便與標準進行區分，同時也便於自己的渲染引擎識別。
  因此，要一直到官方標準正式確定，可以支援某個新的CSS樣式了，這時候就可以去掉字首，被所有的主流瀏覽器所使用。

瀏覽器引擎字首(Vendor Prefix)

   值得注意的是,市場上絕大多數的瀏覽器以及獨立app都是使用的WebKit核心，作為應用最廣的瀏覽器核心，安卓、IOS等系統的手機內建瀏覽器以及最主流的第三方瀏覽器使用的也都是WebKit。
  Android平臺中UC的U3核心、手機QQ瀏覽器的X5核心以及華為天天瀏覽器的T9核心均基於開源核心Webkit

開發，在Webkit的基礎上進行二次優化，並不能算是完全的自主核心。而在iOS以及WP7平臺上，由於系統封閉，不允許除系統自帶瀏覽器核心以外的瀏覽器核心進入，因此各家瀏覽器的開發均為在Safari或者IE核心的基礎上進行二次開發，優化功能和自制UI。
  也就是說，移動端基本上只需要新增 -webkit- 字首即可。

Sass和Mixin

Sass是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。Sass號稱世界上最成熟、最穩定、最強大的專業級CSS擴充套件語言（官網說的）。

使用Sass前肯定需要先安裝它（

混合指令（Mixin）用於定義可重複使用的樣式，避免了使用無語意的 class，比如 .float-left。混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過引數功能引入變數，輸出多樣化的樣式。

定義Mixins

混合指令的用法是在 @mixin 後新增名稱與樣式。比如：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

使用@mixin指令

使用 @include 指令引用混合樣式，格式是在其後新增混合名稱，以及需要的引數（可選）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

上面的程式碼將會被編譯成：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

自動新增字首的@mixin指令

// 預設將輸出webkit字首，moz字首和標準
@mixin prefixer($property, $value, $prefixes: webkit moz) {
  #{$property}: $value;

  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}:#{$value};
    }
    @else if $prefix == moz {
      -moz-#{$property}:#{$value};
    }
    @else if $prefix == o {
      -o-#{$property}:#{$value};
    }
    @else if $prefix == ms {
      -ms-#{$property}:#{$value};
    }
  }
}

  首先遍歷引數 $prefixes ，依次輸出引數裡面包含的字首名，接著使用插值語句 #{}輸出包含瀏覽器字首的屬性名加屬性值，這就輸出了一個完整的包含瀏覽器字首的樣式了，最後輸出不帶字首的標準寫法。
  值得注意的是，在 @mixin 指令中給引數 $prefixes設定了預設值 “ webkit moz ”，這樣，當我們沒有輸入第三個引數的時候，就預設輸出輸出webkit字首，moz字首和不帶字首的標準的寫法。

使用方法

#main {
    @include prefixer(border-radius, 10px, webkit moz o ms);
}

編譯為：

#main {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

當然，如果只想預設輸出webkit字首，moz字首和標準寫法，我們可以這樣寫：

#main {
    @include prefixer(border-radius, 10px);
}

編譯為：

#main {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }

主要的需要新增瀏覽器引擎字首的屬性

• 過渡屬性(transition-property, transition-duration, transition-timing-function, transition-delay)
• 動畫屬性 (animation-name, animation-duration, animation-timing-function, animation-delay)
• border-radius
• box-shadow
• backface-visibility
• column屬性
• flex屬性
• perspective屬性

當然這只是部分而已，還有其他一些CSS3屬性需要加瀏覽器字首。