這個 SCSS 計畫如何從地圖開始保持組織性

在為我的產品 LiveAPI 撰寫文件時，我開始使用 MkDocs，這是一個靜態網站產生器，可以產生乾淨且專業的文件。

但是，我發現它的設計有點單調，因此決定探索該項目進行一些自訂。

這趟旅程讓我發現了其架構中一個有趣的部分：Sass 地圖。

最初的隨意修改變成了對這個項目背後深思熟慮的設計的更深層次的欣賞。

在這篇部落格中，我將探討如何在 MkDocs 的 Material 主題中使用 Sass 映射（特別是在其 mixins 中），以及它們如何為設計系統的靈活性和可擴展性做出貢獻。讓我們開始吧！

---

什麼是 Sass 地圖？

Sass 映射是 Sass 中的鍵值資料結構，類似 Python 中的字典或 JavaScript 中的物件。

它們允許我們緊湊地儲存相關資料並動態檢索值。

在 MkDocs Material 主題中，Sass 映射用於定義響應式設計的特定於裝置的斷點。例如：

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

此地圖將斷點組織為類別（行動裝置、平板電腦、螢幕）和子類別（肖像、風景、小、中、大）。

它不只是一個靜態定義－它是動態生成反應行為的支柱。

---

Sass 映射如何在 MkDocs Mixins 中運作

主題使用一系列函數和 mixin 來提取和利用 $break-devices 映射中的資料。詳細介紹如下：

1. 擷取斷點值

break-select-device函數遍歷map來尋找相關的裝置類別並檢索關聯的斷點。

如果指定了多個層級（例如，移動肖像），它會更深入地挖掘層次結構。

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

• @for Loop: 此循環從 $device 清單中的第一個項目運行到最後一個項目，確保檢查層次結構中的每個層級。
• @if 條件： 這會檢查目前值是否仍為地圖，如果為真則繼續挖掘。如果沒有，它會停止並顯示錯誤訊息。
• map.get： 內建 Sass 函數，使用鍵從地圖中檢索值。

2. 建立媒體查詢

在 SCSS 中，mixin 是一個可重複使用的程式碼區塊，您可以定義一次並在整個樣式表中使用。

它允許您多次包含樣式或邏輯而無需重複程式碼，從而有助於保持程式碼乾燥（不要重複自己）。

例如，如果您需要重複套用一組樣式，您可以建立一個 mixin 並在需要時重複使用它：

break-from-device 和break-to-device mixin 利用此函數動態產生媒體查詢。例如：

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

此 mixin 套用地圖中指定的最小寬度的樣式。類似的方法用於中斷到設備混合，其目標是最大寬度。

---

應用 Mixin

要了解「從裝置中斷」和「到裝置中斷」混合的強大功能，讓我們來看看如何使用它們動態實現響應式樣式的實際範例。

範例 1：套用行動裝置的預設樣式

預設情況下，我們使用網格佈局為行動螢幕套用樣式，該佈局在小螢幕上運作良好，無需 mixin。例如：

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

在這種情況下，佈局已經針對行動裝置進行了最佳化。預設情況下，基本樣式迎合行動用戶。

為了增強對大螢幕的反應能力，您可以使用 Break-from-device mixin 來定位特定斷點。

---

範例 2：定位平板電腦景觀

在較小的螢幕上，例如平板電腦到橫向斷點，由於螢幕空間有限，側邊欄等某些元素可能無法很好地適應。

在這種情況下，我們可以隱藏側邊欄並將其顯示為左側彈出窗口，以優先顯示主要內容。例如：

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• 平板電腦橫向：指$break-devices 地圖中的平板電腦類別及其橫向子類別。
• 產生的媒體查詢將是：

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

對於大於平板電腦橫向斷點的設備，有更多的螢幕空間可用，我們可以引入兩列佈局以改善內容分佈。這可以使用 Break-from-device mixin 來實現：

@include break-to-device(tablet landscape) {
  .sidebar {
    display: none;
  }
}

• 產生的媒體查詢將是：

  @media screen and (max-width: 1219px) {
    .sidebar {
      display: none;
    }
  }

---

範例 3：定位桌面

隨著螢幕尺寸的增加，可以有更多空間來展示內容。

對於桌面，我們可以根據螢幕尺寸，使用 Break-from-device mixin 調整網格佈局以建立三列或四列。

對於小型桌面：

當螢幕尺寸夠大以容納三列時，適用以下樣式：

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

• 桌面小：指$break-devices 地圖中的桌面類別及其小子類別。
• 產生的媒體查詢將是：

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

對於大型桌面：

對於更大的螢幕，我們可以創建四列以最大限度地利用螢幕空間：

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• desktop large：指 $break-devices 映射中的桌面類別及其大型子類別。
• 產生的媒體查詢將是：

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

---

建築優雅

這個設計體現了作者優先考慮可擴展性和可維護性的意圖。

透過將斷點抽象化為單一事實來源並使用混合進行媒體查詢，他們創建了一個系統：

• 易於維護：更新斷點或新增斷點不需要搜尋程式碼庫。
• 增強可讀性：媒體查詢被抽象化為邏輯的、可重複使用的元件。
• 促進可擴充性：可以將新裝置或類別新增至地圖中，而不會破壞現有功能。

---

最後的想法

探索 MkDocs Material 加深了我對前端架構中深思熟慮的設計的欣賞。

Sass 映射、mixin 和分層資料結構的使用是可維護和可擴展設計系統的大師班。

如果您希望建立或改進自己的響應式樣式，請考慮採用類似的技術。

您在專案中遇到或使用過 Sass 地圖嗎？我很想聽聽您的經驗和見解！

想更深入了解設計世界嗎？請參閱我們的其他部落格文章：

• 非設計師的設計基本法則
• 強大的UI設計與實作原則
• 製作很棒的小部件

訂閱每週有關開發、IT、營運、設計、領導等方面的見解。

以上是這個 SCSS 計畫如何從地圖開始保持組織性的詳細內容。更多資訊請關注PHP中文網其他相關文章！