在為我的產(chǎn)品 LiveAPI 編寫文檔時(shí)，我開始使用 MkDocs，這是一個(gè)靜態(tài)站點(diǎn)生成器，可以生成干凈且專業(yè)的文檔。

但是，我發(fā)現(xiàn)它的設(shè)計(jì)有點(diǎn)單調(diào)，因此決定探索該項(xiàng)目進(jìn)行一些定制。

這次旅程讓我發(fā)現(xiàn)了其架構(gòu)中一個(gè)有趣的部分：Sass 地圖。

最初的隨意修改變成了對這個(gè)項(xiàng)目背后深思熟慮的設(shè)計(jì)的更深層次的欣賞。

在這篇博客中，我將探討如何在 MkDocs 的 Material 主題中使用 Sass 映射（特別是在其 mixins 中），以及它們?nèi)绾螢樵O(shè)計(jì)系統(tǒng)的靈活性和可擴(kuò)展性做出貢獻(xiàn)。讓我們開始吧！

---

什么是 Sass 地圖？

Sass 映射是 Sass 中的鍵值數(shù)據(jù)結(jié)構(gòu)，類似于 Python 中的字典或 JavaScript 中的對象。

它們允許我們緊湊地存儲相關(guān)數(shù)據(jù)并動態(tài)檢索值。

在 MkDocs Material 主題中，Sass 映射用于定義響應(yīng)式設(shè)計(jì)的特定于設(shè)備的斷點(diǎn)。例如：

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

此地圖將斷點(diǎn)組織為類別（移動設(shè)備、平板電腦、屏幕）和子類別（肖像、風(fēng)景、小、中、大）。

它不僅僅是一個(gè)靜態(tài)定義——它是動態(tài)生成響應(yīng)行為的支柱。

---

Sass 映射如何在 MkDocs Mixins 中工作

主題使用一系列函數(shù)和 mixin 來提取和利用 $break-devices 映射中的數(shù)據(jù)。詳細(xì)介紹如下：

1. 提取斷點(diǎn)值

break-select-device函數(shù)遍歷map來查找相關(guān)的設(shè)備類別并檢索關(guān)聯(lián)的斷點(diǎn)。

如果指定了多個(gè)級別（例如，移動肖像），它會更深入地挖掘?qū)哟谓Y(jié)構(gòu)。

@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: 此循環(huán)從 $device 列表中的第一個(gè)項(xiàng)目運(yùn)行到最后一個(gè)項(xiàng)目，確保檢查層次結(jié)構(gòu)中的每個(gè)級別。
• @if 條件： 這會檢查當(dāng)前值是否仍然是地圖，如果為真則繼續(xù)挖掘。如果沒有，它會停止并顯示錯(cuò)誤消息。
• map.get： 內(nèi)置 Sass 函數(shù)，使用鍵從地圖中檢索值。

2. 創(chuàng)建媒體查詢

在 SCSS 中，mixin 是一個(gè)可重用的代碼塊，您可以定義一次并在整個(gè)樣式表中使用。

它允許您多次包含樣式或邏輯而無需重復(fù)代碼，從而有助于保持代碼干燥（不要重復(fù)自己）。

例如，如果您需要重復(fù)應(yīng)用一組樣式，您可以創(chuàng)建一個(gè) mixin 并在需要時(shí)重復(fù)使用它：

break-from-device 和break-to-device mixin 利用此函數(shù)動態(tài)生成媒體查詢。例如：

@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 應(yīng)用地圖中指定的最小寬度的樣式。類似的方法用于中斷到設(shè)備混合，其目標(biāo)是最大寬度。

---

應(yīng)用 Mixin

要了解“從設(shè)備中斷”和“到設(shè)備中斷”混合的強(qiáng)大功能，讓我們看一下如何使用它們動態(tài)實(shí)現(xiàn)響應(yīng)式樣式的實(shí)際示例。

示例 1：應(yīng)用移動設(shè)備的默認(rèn)樣式

默認(rèn)情況下，我們使用網(wǎng)格布局為移動屏幕應(yīng)用樣式，該布局在小屏幕上運(yùn)行良好，無需 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;
}

在這種情況下，布局已經(jīng)針對移動設(shè)備進(jìn)行了優(yōu)化。默認(rèn)情況下，基本樣式迎合移動用戶。

為了增強(qiáng)對大屏幕的響應(yīng)能力，您可以使用 Break-from-device mixin 來定位特定斷點(diǎn)。

---

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

在較小的屏幕上，例如平板電腦到橫向斷點(diǎn)，由于屏幕空間有限，側(cè)邊欄等某些元素可能無法很好地適應(yīng)。

在這種情況下，我們可以隱藏側(cè)邊欄并將其顯示為左側(cè)彈出窗口，以優(yōu)先顯示主要內(nèi)容。例如：

@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 */
}

對于大于平板電腦橫向斷點(diǎn)的設(shè)備，有更多的屏幕空間可用，我們可以引入兩列布局以改進(jìn)內(nèi)容分布。這可以使用 Break-from-device mixin 來實(shí)現(xiàn)：

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

• 生成的媒體查詢將是：

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

---

示例 3：定位桌面

隨著屏幕尺寸的增加，可以有更多空間來展示內(nèi)容。

對于桌面，我們可以根據(jù)屏幕尺寸，使用 Break-from-device mixin 調(diào)整網(wǎng)格布局以創(chuàng)建三列或四列。

對于小型桌面：

當(dāng)屏幕尺寸足夠大以容納三列時(shí)，適用以下樣式：

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

對于大型桌面：

對于更大的屏幕，我們可以創(chuàng)建四列以最大限度地利用屏幕空間：

@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 */
}

---

建筑優(yōu)雅

這個(gè)設(shè)計(jì)體現(xiàn)了作者優(yōu)先考慮可擴(kuò)展性和可維護(hù)性的意圖。

通過將斷點(diǎn)抽象為單一事實(shí)來源并使用混合進(jìn)行媒體查詢，他們創(chuàng)建了一個(gè)系統(tǒng)：

• 易于維護(hù)：更新斷點(diǎn)或添加新斷點(diǎn)不需要搜索代碼庫。
• 增強(qiáng)可讀性：媒體查詢被抽象為邏輯的、可重用的組件。
• 促進(jìn)可擴(kuò)展性：可以將新設(shè)備或類別添加到地圖中，而不會破壞現(xiàn)有功能。

---

最后的想法

探索 MkDocs Material 加深了我對前端架構(gòu)中深思熟慮的設(shè)計(jì)的欣賞。

Sass 映射、mixin 和分層數(shù)據(jù)結(jié)構(gòu)的使用是可維護(hù)和可擴(kuò)展設(shè)計(jì)系統(tǒng)的大師班。

如果您希望創(chuàng)建或改進(jìn)自己的響應(yīng)式樣式，請考慮采用類似的技術(shù)。

您在項(xiàng)目中遇到或使用過 Sass 地圖嗎？我很想聽聽您的經(jīng)驗(yàn)和見解！

想更深入地了解設(shè)計(jì)世界嗎？查看我們的其他博客文章：

• 非設(shè)計(jì)師的設(shè)計(jì)基本規(guī)則
• 強(qiáng)大的UI設(shè)計(jì)與實(shí)現(xiàn)原理
• 制作很棒的小部件

訂閱每周有關(guān)開發(fā)、IT、運(yùn)營、設(shè)計(jì)、領(lǐng)導(dǎo)力等方面的見解。

以上是這個(gè) SCSS 項(xiàng)目如何從地圖開始保持組織性的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！