原文：LEVERAGING SASS MIXINS FOR CLEANER CODE

毫無(wú)疑問(wèn)，Sass 最強(qiáng)大和最有價(jià)值的特性之一是能夠?qū)F(xiàn)有代碼打包成稱為 mixins 的可重用代碼塊。

Mixins are like macros

Mixin 是其他編程語(yǔ)言中宏的 Sass 等價(jià)物。 如果您之前編程過(guò)，您可以將它們視為函數(shù)、過(guò)程或方法，但它們?cè)诩夹g(shù)上不是這些概念中的任何一個(gè)，因?yàn)樗鼈兊墓δ苁窃诰幾g時(shí)生成代碼，而不是在運(yùn)行時(shí)執(zhí)行代碼。

How Mixins Work

Compass由SASS的核心團(tuán)隊(duì)成員Chris Eppstein創(chuàng)建，是一個(gè)非常豐富的樣式框架，包括大量定義好的mixin，函數(shù)，以及對(duì)SASS的擴(kuò)展。

Compass 項(xiàng)目充滿了mixin，讓你的生活更輕松。 從 CSS3，到排版，到布局，再到圖像處理，Compass 可以輕松編寫跨瀏覽器的防彈 CSS。 我們喜歡將 Compass 視為 Sass 的標(biāo)準(zhǔn)庫(kù)。

Compass 中的 CSS3 支持可能是該項(xiàng)目最令人震驚的方面。 Compass 提供了各種各樣的 CSS3 mixin，可以輕松地以跨瀏覽器工作的方式利用這些新功能。

例如,border-radius mixin 允許您以簡(jiǎn)潔的方式使用新的 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 輸出了六行代碼。 這六行允許您在所有現(xiàn)代 Web 瀏覽器中使用 border-radius。 （很酷的部分是，如果您自己編寫此代碼，您可能不會(huì)包含對(duì) Opera (-o) 或 Konquerer (-khtml) 的支持，但是 Compass 免費(fèi)為您提供所有這些！）

上面，我使用 @include 指令告訴 Sass 我想調(diào)用一個(gè) mixin。 其后是 mixin 的名稱，border-radius。 后跟括號(hào)括起傳遞混入的參數(shù)。 border-radius mixin 只有一個(gè)參數(shù)。 在這種情況下，5px 作為第一個(gè)參數(shù)的值傳遞。

Writing Your Own

讓我們看看上面的border-radius mixin的來(lái)源。 出于說(shuō)明的目的，我將向您展示 mixin 的簡(jiǎn)化版本。 Compass 的實(shí)際版本有點(diǎn)復(fù)雜，但這會(huì)讓你對(duì)如何編寫自己的版本有一個(gè)很好的了解：

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

聲明以@mixin 指令開頭，后跟mixin 的名稱。在這種情況下，border-radius. mixin 的名稱可以包含字母和數(shù)字字符的任意組合，沒有空格。然后是包含在括號(hào) ( … ) 中的 mixin 接受的參數(shù)列表。上面的 mixin 只有一個(gè)參數(shù) $radius?？梢允褂枚鄠€(gè)參數(shù)，只要它們用逗號(hào)分隔即可。

接下來(lái)是括在大括號(hào) { … } 中的 mixin 的定義。 mixin 的定義可以包含 CSS 屬性的任意組合。您甚至可以聲明將與屬性一起混合到 CSS 中的其他規(guī)則（使用選擇器）。

在這種情況下，border-radius mixin 包含一系列 CSS 屬性，用于為所有使用瀏覽器特定前綴實(shí)現(xiàn)它的主要瀏覽器設(shè)置 border-radius 屬性的值，并將最終的 border-radius 屬性設(shè)置為 future-證明該屬性，因?yàn)樗驯徽浇邮転?CSS3 規(guī)范的一部分。

$radius 參數(shù)或變量用于設(shè)置每個(gè) CSS 屬性的值。使用這種技術(shù)，您可以將一個(gè)值傳遞給 mixin，它會(huì)在輸出中重復(fù)四次。這減少了您將一個(gè)或多個(gè)特定于瀏覽器的屬性的值輸入錯(cuò)誤的可能性（如果您手動(dòng)輸入而不是使用 mixin），并且還節(jié)省了大量輸入。

再看一個(gè) SAP Spartacus 里的 mixin 例子。

注意：這個(gè) mixin 實(shí)現(xiàn)位于 node_modules\bootstrap\scss 文件夾下面，并不是 Spartacus 自行實(shí)現(xiàn)的。

// 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;} }

消費(fèi)代碼：

Default Arguments

您可以通過(guò)為 $radius 參數(shù)添加默認(rèn)值來(lái)改進(jìn)此 mixin，如下所示：

@mixin border-radius($radius: 5px) {... }

這使得 $radius 參數(shù)可選。 所以你可以像這樣在沒有它的情況下調(diào)用 mixin：

@include border-radius;

這將在聲明的參數(shù)列表中輸出具有默認(rèn)值的屬性。 在本例中為 5px，因?yàn)檫@是我們?cè)谏厦媛暶鞯摹?/p>

另一個(gè)非常有用的技巧是預(yù)先聲明一個(gè)變量并將其用作 mixin 的默認(rèn)值：

$default-border-radius: 5px !default; @mixin border-radius($radius: $default-border-radius) {... }

這對(duì)于您在項(xiàng)目之間共享的代碼特別有用。 通過(guò)修改全局變量來(lái)設(shè)置默認(rèn)值，并根據(jù)需要覆蓋該值。

Keyword Arguments

從 Sass 3.1 開始，最后一個(gè) mixin 特性是關(guān)鍵字參數(shù)。 當(dāng) mixin 接受多個(gè)參數(shù)時(shí)，關(guān)鍵字參數(shù)特別有用。 如果參數(shù)是默認(rèn)值，您可以使用參數(shù)名稱來(lái)設(shè)置參數(shù)的特定值，而無(wú)需傳遞其他參數(shù)的值。

與@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; }

上面的代碼分別根據(jù) webkit 和 $ms 的值有條件地輸出 Firefox、Safari 和 Internet Explorer 的代碼。 由于所有參數(shù)都有默認(rèn)值，您可以通過(guò)調(diào)用 mixin 來(lái)關(guān)閉對(duì) Internet Explorer 的支持，如下所示：

@include border-radius($ms: false);

這比使用沒有名稱的每個(gè)參數(shù)調(diào)用 mixin 要簡(jiǎn)單得多：

@include border-radius(5px, true, true, true);

使用關(guān)鍵字參數(shù)，您甚至不必按照聲明的順序調(diào)用帶有參數(shù)的 mixin：

@include border-radius($ms: false, $radius: 10px);

總結(jié)

關(guān)于 Sass mixins 的概述到此結(jié)束。 為了更好地了解如何在代碼中使用它們，我建議您查看一個(gè)成熟的 Sass 項(xiàng)目（如 Compass）的源代碼，其中包含 200 多個(gè)可用于學(xué)習(xí)許多出色技術(shù)的 mixin。 此外，Compass 文檔實(shí)際上包含“查看源代碼”鏈接，可以輕松查看任何 mixin 的代碼以查看其功能。 您可以先查看 border-radius 的實(shí)際實(shí)現(xiàn)。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。