从地图开始，这个 SCSS 项目如何保持井然有序

在为我的产品 LiveAPI 编写文档时，我开始使用 MkDocs，这是一个可以生成干净、专业文档的静态站点生成器。

然而，我发现它的设计有点单调，并决定探索该项目以进行一些定制。

这次旅程让我发现了其架构中一个有趣的部分：Sass 地图。

最初只是一次随意的修改，后来却对该项目背后周到的设计产生了更深的欣赏。

在这篇博客中，我将探讨如何在 MkDocs 的 Material 主题（具体来说是在其 mixin 中）中使用 Sass 映射，以及它们如何为设计系统的灵活性和可扩展性做出贡献。让我们开始吧！

什么是 Sass Maps？

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 Maps 如何在 MkDocs Mixins 中工作

该主题使用一系列函数和混合函数来提取和利用“$break-devices”映射中的数据。具体细节如下：

1. 提取断点值

`break-select-device` 函数遍历地图以查找相关的设备类别并检索关联的断点。

如果指定了多个级别（例如，“移动肖像”），它会更深入地挖掘层次结构。

@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 循环：此循环从 $device 列表中的第一个项目运行到最后一个项目，确保检查层次结构中的每个级别。

@if 条件：检查当前值是否仍为映射，如果为真则继续挖掘。如果不是，则停止并显示错误消息。

map.get：一个内置的 Sass 函数，使用键从映射中检索值。

2. 创建媒体查询

在 SCSS 中，mixin 是一个可重复使用的代码块，您可以定义一次并在整个样式表中使用。

它允许您多次包含样式或逻辑而无需重复代码，从而帮助您保持代码 DRY（不要重复自己）。

例如，如果您需要重复应用一组样式，则可以创建一个 mixin 并在需要时重复使用它：

`break-from-device` 和 `break-to-device` mixins 利用此功能动态生成媒体查询。例如：

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

此 mixin 会应用地图中指定的最小宽度样式。`break-to-device` mixin 也采用了类似的方法，以最大宽度为目标。

应用 Mixins

为了了解 `break-from-device` 和 `break-to-device` 混合宏的威力，让我们看一些如何使用它们动态实现响应式样式的实际例子。

示例 1：应用移动设备的默认样式

默认情况下，我们使用网格布局来应用适合移动设备屏幕的样式，这种布局在小屏幕上运行良好，无需混合。例如：

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

在这种情况下，布局已经针对移动设备进行了优化。基本样式默认适合移动用户。

为了增强大屏幕的响应能力，您可以使用“break-from-device”混合宏来定位特定的断点。

示例 2：针对横向平板电脑

在较小的屏幕上（例如，在横向断点之前的平板电脑），由于屏幕空间有限，某些元素（例如侧边栏）可能不太适合。

在这种情况下，我们可以隐藏侧边栏，并将其显示为左侧的弹出窗口，以优先显示主要内容。例如：

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

平板电脑横向：指的是 $break-devices 图中平板电脑类别及其横向子类别。

生成的媒体查询将是：

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

对于大于“平板横屏”断点的设备，由于有更多屏幕空间可用，我们可以引入两列布局来改善内容分布。这可以使用“break-from-device”混合来实现：

@include break-from-device(("tablet", "landscape")) {
  .grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* 2 columns for tablets and larger screens */
  }
}

生成的媒体查询将是：

@media screen and (min-width: 1220px) {
    .grid {
      grid-template-columns: repeat(
        2,
        1fr
      ); /* 2 columns for tablets and  larger screens */
    }
  }

示例 3：针对桌面

随着屏幕尺寸的增加，可用于呈现内容的空间也变大了。

对于桌面，我们可以使用“break-from-device”混合函数调整网格布局以根据屏幕尺寸创建三列或四列。

对于小型桌面：

当屏幕尺寸足够大到可以容纳三列时，将应用以下样式：

@include break-from-device(("desktop", "small")) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for small desktops */
  }
}

桌面小：指的是$break-devices 映射中的桌面类别及其小子类别。

生成的媒体查询将是：

@media screen and (min-width: 1440px) {
    .grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

对于大型桌面：

对于更大的屏幕，我们可以创建四列以最大限度地利用屏幕空间：

@include break-from-device(("desktop", "large")) {
  .grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for large desktops */
  }
}

桌面大：指的是$break-devices 图中桌面类别及其大子类别。

生成的媒体查询将是：

@media screen and (min-width: 1920px) {
    .grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

建筑优雅

这种设计体现了作者优先考虑可扩展性和可维护性的意图。

通过将断点抽象为单一事实来源并使用混合进行媒体查询，他们创建了一个系统：

易于维护：更新断点或添加新断点不需要搜索代码库。

增强可读性：媒体查询被抽象为逻辑的、可重复使用的组件。

提高可扩展性：可以在不破坏现有功能的情况下将新设备或类别添加到地图中。

最后的想法

探索 MkDocs Material 加深了我对前端架构周到设计的欣赏。

Sass 映射、混合和分层数据结构的使用是可维护和可扩展设计系统的大师级作品。

如果您希望创建或改进自己的响应式风格，请考虑采用类似的技术。

您在项目中遇到过或使用过 Sass 地图吗？我很想听听您的经验和见解！

**想深入了解设计世界？查看我们的其他博客文章：**

非设计师的设计基本规则

强大的UI设计和实现原则

制作出色的小部件

订阅每周有关开发、IT、运营、设计、领导力等的见解。

CLIS.CC

从地图开始，这个 SCSS 项目如何保持井然有序

什么是 Sass Maps？

Sass Maps 如何在 MkDocs Mixins 中工作

1. 提取断点值

2. 创建媒体查询

应用 Mixins

示例 1：应用移动设备的默认样式

示例 2：针对横向平板电脑

示例 3：针对桌面

对于小型桌面：

对于大型桌面：

建筑优雅

最后的想法