原文：LEVERAGING SASS MIXINS FOR CLEANER CODE
毫無疑問，Sass 最強大和最有價值的特性之一是能夠将現有代碼打包成稱為 mixins 的可重用代碼塊。
Mixins are like macros
Mixin 是其他程式設計語言中宏的 Sass 等價物。 如果您之前程式設計過，您可以将它們視為函數、過程或方法，但它們在技術上不是這些概念中的任何一個，因為它們的功能是在編譯時生成代碼，而不是在運作時執行代碼。
How Mixins Work
Compass由SASS的核心團隊成員Chris Eppstein建立，是一個非常豐富的樣式架構，包括大量定義好的mixin，函數，以及對SASS的擴充。
Compass 項目充滿了mixin，讓你的生活更輕松。 從 CSS3，到排版，到布局，再到圖像處理，Compass 可以輕松編寫跨浏覽器的防彈 CSS。 我們喜歡将 Compass 視為 Sass 的标準庫。
Compass 中的 CSS3 支援可能是該項目最令人震驚的方面。 Compass 提供了各種各樣的 CSS3 mixin，可以輕松地以跨浏覽器工作的方式利用這些新功能。
例如,border-radius mixin 允許您以簡潔的方式使用新的 border-radius 屬性：
a.button {
background: black;
color: white;
padding: 10px 20px;
@include border-radius(5px);
}
1
2
3
4
5
6
輸出：
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
7
8
9
10
11
檢視輸出，您可以看到border-radius mixin 輸出了六行代碼。 這六行允許您在所有現代 Web 浏覽器中使用 border-radius。 （很酷的部分是，如果您自己編寫此代碼，您可能不會包含對 Opera (-o) 或 Konquerer (-khtml) 的支援，但是 Compass 免費為您提供所有這些！）
上面，我使用 @include 指令告訴 Sass 我想調用一個 mixin。 其後是 mixin 的名稱，border-radius。 後跟括号括起傳遞混入的參數。 border-radius mixin 隻有一個參數。 在這種情況下，5px 作為第一個參數的值傳遞。
Writing Your Own
讓我們看看上面的border-radius mixin的來源。 出于說明的目的，我将向您展示 mixin 的簡化版本。 Compass 的實際版本有點複雜，但這會讓你對如何編寫自己的版本有一個很好的了解：
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
聲明以@mixin 指令開頭，後跟mixin 的名稱。在這種情況下，border-radius. mixin 的名稱可以包含字母和數字字元的任意組合，沒有空格。然後是包含在括号 ( … ) 中的 mixin 接受的參數清單。上面的 mixin 隻有一個參數 $radius。可以使用多個參數，隻要它們用逗号分隔即可。
接下來是括在大括号 { … } 中的 mixin 的定義。 mixin 的定義可以包含 CSS 屬性的任意組合。您甚至可以聲明将與屬性一起混合到 CSS 中的其他規則（使用選擇器）。
在這種情況下，border-radius mixin 包含一系列 CSS 屬性，用于為所有使用浏覽器特定字首實作它的主要浏覽器設定 border-radius 屬性的值，并将最終的 border-radius 屬性設定為 future-證明該屬性，因為它已被正式接受為 CSS3 規範的一部分。
$radius 參數或變量用于設定每個 CSS 屬性的值。使用這種技術，您可以将一個值傳遞給 mixin，它會在輸出中重複四次。這減少了您将一個或多個特定于浏覽器的屬性的值輸入錯誤的可能性（如果您手動輸入而不是使用 mixin），并且還節省了大量輸入。
再看一個 SAP Spartacus 裡的 mixin 例子。
注意：這個 mixin 實作位于 node_modules\bootstrap\scss 檔案夾下面，并不是 Spartacus 自行實作的。
Default Arguments
您可以通過為 $radius 參數添加預設值來改進此 mixin，如下所示：
@mixin border-radius($radius: 5px) {
...
這使得 $radius 參數可選。 是以你可以像這樣在沒有它的情況下調用 mixin：
@include border-radius;
這将在聲明的參數清單中輸出具有預設值的屬性。 在本例中為 5px，因為這是我們在上面聲明的。
另一個非常有用的技巧是預先聲明一個變量并将其用作 mixin 的預設值：
$default-border-radius: 5px !default;
@mixin border-radius($radius: $default-border-radius) {
這對于您在項目之間共享的代碼特别有用。 通過修改全局變量來設定預設值，并根據需要覆寫該值。
Keyword Arguments
從 Sass 3.1 開始，最後一個 mixin 特性是關鍵字參數。 當 mixin 接受多個參數時，關鍵字參數特别有用。 如果參數是預設值，您可以使用參數名稱來設定參數的特定值，而無需傳遞其他參數的值。
與@if 條件一起使用，我們可以制作出更好的 border-radius mixin 版本：
@mixin border-radius($radius: 5px, $moz: true, $webkit: true, $ms: true) {
@if $moz { -moz-border-radius: $radius; }
@if $webkit { -webkit-border-radius: $radius; }
@if $ms { -ms-border-radius: $radius; }
上面的代碼分别根據 m o z 、 moz、moz、webkit 和 $ms 的值有條件地輸出 Firefox、Safari 和 Internet Explorer 的代碼。 由于所有參數都有預設值，您可以通過調用 mixin 來關閉對 Internet Explorer 的支援，如下所示：
@include border-radius($ms: false);
這比使用沒有名稱的每個參數調用 mixin 要簡單得多：
@include border-radius(5px, true, true, true);
使用關鍵字參數，您甚至不必按照聲明的順序調用帶有參數的 mixin：
@include border-radius($ms: false, $radius: 10px);
總結
關于 Sass mixins 的概述到此結束。 為了更好地了解如何在代碼中使用它們，我建議您檢視一個成熟的 Sass 項目（如 Compass）的源代碼，其中包含 200 多個可用于學習許多出色技術的 mixin。 此外，Compass 文檔實際上包含“檢視源代碼”連結，可以輕松檢視任何 mixin 的代碼以檢視其功能。 您可以先檢視 border-radius 的實際實作。