地図から始めてこの SCSS プロジェクトをどのように組織化するか

自分の製品である LiveAPI のドキュメントに取り組んでいるとき、私は MkDocs を使い始めました。MkDocs は、クリーンでプロフェッショナルなドキュメントを作成する静的サイト ジェネレーターです。

しかし、そのデザインが少し単調だと感じたので、いくつかのカスタマイズを行うためにプロジェクトを調査することにしました。

この旅は、私をそのアーキテクチャの興味深い部分である Sass マップに導きました。

何気ない変更として始まったものが、このプロジェクトの背後にある思慮深いデザインに対するより深い評価へと変わりました。

このブログでは、Sass マップが MkDocs のマテリアル テーマ、特にそのミックスインでどのように使用されているか、またそれらがデザイン システムの柔軟性とスケーラビリティにどのように貢献しているかを探っていきます。飛び込んでみましょう!

---

Sass マップとは何ですか?

Sass マップは Sass のキーと値のデータ構造で、Python の辞書や JavaScript のオブジェクトに似ています。

これらを使用すると、関連データをコンパクトに保存し、値を動的に取得できます。

MkDocs マテリアル テーマでは、レスポンシブ デザインのデバイス固有のブレークポイントを定義するために 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;

このマップは、ブレークポイントをカテゴリ (モバイル、タブレット、画面) とサブカテゴリ (縦、横、小、中、大) に分類します。

これは単なる静的な定義ではなく、応答動作が動的に生成される方法のバックボーンです。

---

MkDocs Mixins での Sass マップの仕組み

テーマは、一連の関数とミックスインを使用して、$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 Condition: 現在の値がまだマップであるかどうかを確認し、true の場合は掘り続けます。そうでない場合は、エラー メッセージが表示されて停止します。
• map.get: キーを使用してマップから値を取得する組み込みの Sass 関数。

2. メディア クエリの作成

SCSS では、ミックスインは、一度定義するとスタイルシート全体で使用できる再利用可能なコード ブロックです。

コードを繰り返さずにスタイルやロジックを複数回含めることができるため、コードを DRY (繰り返さない) に保つことができます。

たとえば、一連のスタイルを繰り返し適用する必要がある場合は、ミックスインを作成し、必要なときにそれを再利用できます。

ブレークフロムデバイスおよびブレークトゥデバイスミックスインは、この機能を利用してメディアクエリを動的に生成します。例:

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

このミックスインは、マップで指定された最小幅のスタイルを適用します。同様のアプローチが、最大幅をターゲットとするブレークトゥデバイス ミックスインにも使用されます。

---

ミックスインの適用

ブレークフロムデバイスミックスインとブレークトゥデバイスミックスインの威力を確認するために、それらを使用してレスポンシブスタイルを動的に実装する方法の実践例を見てみましょう。

例 1: モバイルデバイスにデフォルトのスタイルを適用する

デフォルトでは、ミックスインを必要とせずに小さな画面でも適切に機能するグリッド レイアウトを使用してモバイル画面にスタイルを適用します。例:

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

この場合、レイアウトはすでにモバイルデバイス用に最適化されています。基本スタイルはデフォルトでモバイル ユーザーに対応しています。

大きな画面の応答性を高めるために、ブレークフロムデバイス ミックスインを使用して特定のブレークポイントをターゲットにすることができます。

---

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

タブレットの横長ブレークポイントより大きいデバイスでは、より多くの画面スペースが利用できるため、コンテンツ配信を改善するために 2 列レイアウトを導入できます。これは、break-from-device mixin を使用して実現できます:

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

• 生成されるメディア クエリは次のようになります:

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

---

例 3: デスクトップをターゲットにする

画面サイズが大きくなると、コンテンツを表示するために利用できるスペースが増えます。

デスクトップの場合、ブレークフロムデバイス ミックスインを使用して、画面サイズに応じて 3 つまたは 4 つの列を作成するようにグリッド レイアウトを調整できます。

小規模デスクトップの場合:

画面サイズが 3 列を収容できるほど大きい場合、次のスタイルが適用されます。

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

• desktop small: $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;
}

大規模なデスクトップの場合:

さらに大きな画面の場合は、4 つの列を作成して画面の領域を最大限に活用できます。

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

---

建築の優雅さ

この設計は、拡張性と保守性を優先するという作成者の意図を示しています。

ブレークポイントを単一の信頼できる情報源に抽象化し、メディア クエリにミックスインを使用することで、次のようなシステムを作成しました。

• メンテナンスが簡単: ブレークポイントを更新したり、新しいブレークポイントを追加したりするときに、コードベースを探索する必要はありません。
• 可読性の向上: メディア クエリは、論理的で再利用可能なコンポーネントに抽象化されます。
• スケーラビリティの向上: 既存の機能を損なうことなく、新しいデバイスやカテゴリをマップに追加できます。

---

最終的な考え

MkDocs マテリアルを探索することで、フロントエンド アーキテクチャにおける思慮深い設計に対する理解が深まりました。

Sass マップ、ミックスイン、階層データ構造の使用は、保守可能でスケーラブルなデザイン システムのマスタークラスです。

独自のレスポンシブ スタイルを作成または改善したい場合は、同様の手法を採用することを検討してください。

プロジェクトで Sass マップを使用したことはありますか?あなたの経験や洞察をぜひお聞かせください!

デザインの世界をさらに深く掘り下げてみませんか?他のブログ投稿もチェックしてください:

• 非デザイナーのためのデザインの基本ルール
• 強力な UI デザインと実装の原則
• 素晴らしいウィジェットを作成する

開発、IT、運用、デザイン、リーダーシップなどに関する洞察を毎週購読してください。

以上が地図から始めてこの SCSS プロジェクトをどのように組織化するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。