原文：LEVERAGING SASS MIXINS FOR CLEANER CODE
毫無疑問，Sass 最強大和最有價值的特性之一是能夠?qū)F(xiàn)有代碼打包成稱為 mixins 的可重用代碼塊。
Mixin 是其他編程語言中宏的 Sass 等價物。 如果您之前編程過，您可以將它們視為函數(shù)、過程或方法，但它們在技術(shù)上不是這些概念中的任何一個，因為它們的功能是在編譯時生成代碼，而不是在運行時執(zhí)行代碼。
Compass由SASS的核心團(tuán)隊成員Chris Eppstein創(chuàng)建，是一個非常豐富的樣式框架，包括大量定義好的mixin，函數(shù)，以及對SASS的擴展。
Compass 項目充滿了mixin，讓你的生活更輕松。 從 CSS3，到排版，到布局，再到圖像處理，Compass 可以輕松編寫跨瀏覽器的防彈 CSS。 我們喜歡將 Compass 視為 Sass 的標(biāo)準(zhǔn)庫。
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 輸出了六行代碼。 這六行允許您在所有現(xiàn)代 Web 瀏覽器中使用 border-radius。 （很酷的部分是，如果您自己編寫此代碼，您可能不會包含對 Opera (-o) 或 Konquerer (-khtml) 的支持，但是 Compass 免費為您提供所有這些！）
上面，我使用 @include 指令告訴 Sass 我想調(diào)用一個 mixin。 其后是 mixin 的名稱，border-radius。 后跟括號括起傳遞混入的參數(shù)。 border-radius mixin 只有一個參數(shù)。 在這種情況下，5px 作為第一個參數(shù)的值傳遞。
讓我們看看上面的border-radius mixin的來源。 出于說明的目的，我將向您展示 mixin 的簡化版本。 Compass 的實際版本有點復(fù)雜，但這會讓你對如何編寫自己的版本有一個很好的了解：
@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ù)字字符的任意組合，沒有空格。然后是包含在括號 ( ... ) 中的 mixin 接受的參數(shù)列表。上面的 mixin 只有一個參數(shù) $radius?？梢允褂枚鄠€參數(shù)，只要它們用逗號分隔即可。
接下來是括在大括號 { ... } 中的 mixin 的定義。 mixin 的定義可以包含 CSS 屬性的任意組合。您甚至可以聲明將與屬性一起混合到 CSS 中的其他規(guī)則（使用選擇器）。
在這種情況下，border-radius mixin 包含一系列 CSS 屬性，用于為所有使用瀏覽器特定前綴實現(xiàn)它的主要瀏覽器設(shè)置 border-radius 屬性的值，并將最終的 border-radius 屬性設(shè)置為 future-證明該屬性，因為它已被正式接受為 CSS3 規(guī)范的一部分。
$radius 參數(shù)或變量用于設(shè)置每個 CSS 屬性的值。使用這種技術(shù)，您可以將一個值傳遞給 mixin，它會在輸出中重復(fù)四次。這減少了您將一個或多個特定于瀏覽器的屬性的值輸入錯誤的可能性（如果您手動輸入而不是使用 mixin），并且還節(jié)省了大量輸入。
再看一個 SAP Spartacus 里的 mixin 例子：
// 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;
}}消費代碼：
您可以通過為 $radius 參數(shù)添加默認(rèn)值來改進(jìn)此 mixin，如下所示：
@mixin border-radius($radius: 5px) {
...}這使得 $radius 參數(shù)可選。 所以你可以像這樣在沒有它的情況下調(diào)用 mixin：
@include border-radius;
這將在聲明的參數(shù)列表中輸出具有默認(rèn)值的屬性。 在本例中為 5px，因為這是我們在上面聲明的。
另一個非常有用的技巧是預(yù)先聲明一個變量并將其用作 mixin 的默認(rèn)值：
$default-border-radius: 5px !default;@mixin border-radius($radius: $default-border-radius) {
...}這對于您在項目之間共享的代碼特別有用。 通過修改全局變量來設(shè)置默認(rèn)值，并根據(jù)需要覆蓋該值。
從 Sass 3.1 開始，最后一個 mixin 特性是關(guān)鍵字參數(shù)。 當(dāng) mixin 接受多個參數(shù)時，關(guān)鍵字參數(shù)特別有用。 如果參數(shù)是默認(rèn)值，您可以使用參數(shù)名稱來設(shè)置參數(shù)的特定值，而無需傳遞其他參數(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ù) $moz、$webkit 和 $ms 的值有條件地輸出 Firefox、Safari 和 Internet Explorer 的代碼。 由于所有參數(shù)都有默認(rèn)值，您可以通過調(diào)用 mixin 來關(guān)閉對 Internet Explorer 的支持，如下所示：
@include border-radius($ms: false);
這比使用沒有名稱的每個參數(shù)調(diào)用 mixin 要簡單得多：
@include border-radius(5px, true, true, true);
使用關(guān)鍵字參數(shù)，您甚至不必按照聲明的順序調(diào)用帶有參數(shù)的 mixin：
@include border-radius($ms: false, $radius: 10px);
關(guān)于 Sass mixins 的概述到此結(jié)束。 為了更好地了解如何在代碼中使用它們，我建議您查看一個成熟的 Sass 項目（如 Compass）的源代碼，其中包含 200 多個可用于學(xué)習(xí)許多出色技術(shù)的 mixin。 此外，Compass 文檔實際上包含“查看源代碼”鏈接，可以輕松查看任何 mixin 的代碼以查看其功能。 您可以先查看 border-radius 的實際實現(xiàn)。
聯(lián)系客服
