原文：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); }

輸出：

a.button {background: black;color: white;padding: 10px 20px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px; }

查看輸出，您可以看到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 自行實現的。

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {$min: breakpoint-min($name, $breakpoints);@if $min {@media (min-width: $min) {@content;}} @else {@content;} }

消費代碼：

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; }border-radius: $radius; }

上面的代碼分別根據 $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 的實際實現。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 SASS Mixin 编写 clean code的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。