[原文：LEVERAGING SASS MIXINS FOR CLEANER CODE](https://thesassway.com/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 屬性：

```css
a.button {
  background: black;
  color: white;
  padding: 10px 20px;
  @include border-radius(5px);
}
```

輸出：

```css
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 的實際版本有點複雜，但這會讓你對如何編寫自己的版本有一個很好的瞭解：

```css
@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 例子：

![](https://img-blog.csdnimg.cn/img_convert/cdf8335329d47f0a7062f0aa0e5e4586.png)

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

消費程式碼：

![](https://img-blog.csdnimg.cn/img_convert/04bf1c87ccc522d059055b9fd4bfee0a.png)

# Default Arguments

您可以透過為 $radius 引數新增預設值來改進此 mixin，如下所示：

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

這使得 $radius 引數可選。 所以你可以像這樣在沒有它的情況下呼叫 mixin：

```css
@include border-radius;
```

這將在宣告的引數列表中輸出具有預設值的屬性。 在本例中為 5px，因為這是我們在上面宣告的。

另一個非常有用的技巧是預先宣告一個變數並將其用作 mixin 的預設值：

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

這對於您在專案之間共享的程式碼特別有用。 透過修改全域性變數來設定預設值，並根據需要覆蓋該值。

# Keyword Arguments

從 Sass 3.1 開始，最後一個 mixin 特性是關鍵字引數。 當 mixin 接受多個引數時，關鍵字引數特別有用。 如果引數是預設值，您可以使用引數名稱來設定引數的特定值，而無需傳遞其他引數的值。

與@if 條件一起使用，我們可以製作出更好的 border-radius mixin 版本：

```css
@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 的支援，如下所示：

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

這比使用沒有名稱的每個引數呼叫 mixin 要簡單得多：

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

使用關鍵字引數，您甚至不必按照宣告的順序呼叫帶有引數的 mixin：

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

# 總結

關於 Sass mixins 的概述到此結束。 為了更好地瞭解如何在程式碼中使用它們，我建議您檢視一個成熟的 Sass 專案（如 Compass）的原始碼，其中包含 200 多個可用於學習許多出色技術的 mixin。 此外，Compass 文件實際上包含“檢視原始碼”連結，可以輕鬆檢視任何 mixin 的程式碼以檢視其功能。 您可以先檢視 border-radius 的實際實現。

使用 SASS Mixin 編寫 clean code

相關文章