这个 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中文网其他相关文章！