SASSマップとネストされたリスト

コアポイント

• SASSマップとネストされたリストはどちらもSASSのデータ構造であり、マッピングはSASS 3.3で導入されました。マッピングは、より複雑なデータストレージを可能にするキー価値のペアを提供しますが、ネストされたリストは複雑なデータを保存できるが、キー価値のペアリングがないよりシンプルな構造です。
• マッピングの複雑さが追加されているにもかかわらず、さまざまなデータ（ブレークポイント幅、色の値、グリッドレイアウト、タイプの割合、その他の応答性のあるタイポグラフィの詳細など）を保存する機能のために、それらは人気があります。一方、ネストされたリストは、シンプルで入力が少ないため、より実用的です。
• SASSマッピングを使用する主な利点の1つは、特定の値に直接アクセスできることです。これにより、コードがより効率的かつ読みやすくなります。ただし、ネストされたリストの書き込みと維持が速い場合がありますが、マッピングのエラーチェックと詳細なクエリ機能がありません。
• ネストされたリストは入力の点でより効率的であるかもしれませんが、各リストに含まれるアイテムの数の絶対的な確実性と注文が必要です。ネストされたリストの欠損値は、SASSが報告しないエラーを引き起こす可能性がありますが、マッピングの場合、map-get()関数は1つの値が欠落していても、目的の値を提供できます。

この記事のタイトルは、一部の人々を驚かせるかもしれません。あなたがSASSのベテランである場合、リストのリストを使用して、データのネストされたアレイ（Ruby-Sass-3.3の前）をシミュレートすることを覚えているかもしれません。 （Ruby）SASS 3.3は、マッピングと呼ばれる新しいデータ型を追加します。リストのリストは、複雑なデータをネストされた形式で保存できますが、キー価値のペアリングはありません。マップはキー価値のペアを追加し、データの配列を作成できます。

マッピングの出現により、SASSユーザーの多くは、すべてをマッピングに入れ始めました（そして正当な理由！）。すべてのブレークポイント幅、色の値、グリッドレイアウト、タイプの割合、およびその他の応答性のあるタイポグラフィの詳細をマップに入れることができます！

SASSにキー価値ペアマッピングがあるので、リストのリストを使用する正当な理由はありますか？理論的な理由の1つは、後方互換性です。古いバージョンがインストールされている開発者によってSASSが維持される可能性が高い場合、リストが役立ちます。ただし、実際には、SASSバージョンは通常、

またはその他のプロジェクト構成によって制御され、Ruby Gemは1つのコマンド（）で更新できます。 package.json gem update sassマッピングの代わりにネストされたリストを使用することを選択する可能性のあるより実用的な理由は、入力が少ないことです。マップとネストされたリストを比較して、それらがそれぞれの構文とループトラバーサルでどのように比較されるかを見てみましょう。

文法の比較

この例では、応答性のあるタイポグラフィを制御するデータ構造を作成しましょう。 4つのブレークポイントを保存します（まあ、1つは最小のデフォルトビューです）。各ブレークポイントについて、最小幅、最大幅、ベースフォントサイズ、ベースラインの高さを保存します。

複雑なマッピングSyntax

以下は、データをマップに保存する方法です。大きなマップには、値が保存して使用する必要がある変数のマップである4つのキー（ブレークポイントラベル）が含まれます。この読み取り可能な形式では、450文字以上の文字と26行があります。

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

ネストされたリストの構文

同じデータを保存するネストされたリストは、はるかに短くなります。ただし、キーを追加することはなくなったため、データをループするか、

関数で呼び出すことに依存する必要があります。つまり、マップよりもはるかに短いです。180文字未満、わずか6行です。 nth()

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

サイクルの比較

データ構造を作成する場合、リストを作成するには、マッピング時間の3分の1を記述する必要があります。しかし、これらの値をループする必要がある場合、どのように比較しますか？

複雑なマッピングループ

次のコードを使用して、このマップのトップアイテムをループできます。

この行の先頭にある2つの変数（および）は、ループ内のマップ内のデータを繰り返すと動的に割り当てられます。各トップレベルのデータブロックには、キーと値の2つのコンポーネントがあります。キーを

<code>@each $label, $map in $breakpoint-map {}</code>

に割り当て、値（ネストされたマップです）は

に割り当てます。このループでは、変数$labelおよび$mapを使用できます。これは、現在のエントリのキーと値を自動的に表します。 $label $mapループは4回反復し、ネストされたマップはそれぞれ繰り返されます。ただし、ネストされたマップから有用なデータを取得するには、$label関数を使用する必要があります。この関数は、マップの名前と必要なキーの名前の2つのパラメーターを取り、キーに関連付けられた値を返します。 SASSのJavaScriptのPHPまたは$map構文の

および

に相当します。 map-get() $array['key'] $object->keyを使用してすべてのサブマップを反復し、object.keyを使用してその値を有用な変数に割り当てるには、6ラインの220文字のループになります。

@eachネストされたリストloopmap-get()

ネストされたリストは、ループをより効率的にします。マップの場合、マップを動的ループ変数に割り当ててから、

<code>@each $label, $map in $breakpoint-map {
  $min-width: map-get($map, min-width);
  $max-width: map-get($map, max-width);
  $base-font: map-get($map, base-font);
  $vertical-rhythm: map-get($map, vertical-rhythm);
}</code>

を使用してすべての値を変数に割り当てる必要がありますが、リストの場合、すべての値を変数にすばやく割り当てることができます。

トップレベルリストの各アイテムには同じ順序で同じ5つの値があるため、ループで使用するために各値を動的変数にすぐに割り当てることができます。これらの変数を使用すると、

を使用して使用可能な変数にサブ値を割り当てる必要はありません。必要なネストされたリストループは、100文字未満の2行しかありません。 map-get()

map-get()ネストされたリスト警告

<code>@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
}</code>

ネストされたリストは、主な開発者パフォーマンスの利点です。全体として、マッピングを使用したときに行ったほど半分以下で入力できます。ただし、SASSにマップを追加する理由があります。これらは、リストがない関数を提供します：キー値マッピング。

逃した値

ネストされたリストに依存している場合は、各リストに含まれるアイテムの数と順序を知っていることを絶対に確認する必要があります。リスト内のアイテムを見逃した場合に何が起こるか見てみましょう：

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

コードを実行しようとすると、最後のリストが壊れます。 「xlarge」を$labelに、「1100px」に$min-widthに正しく割り当てますが、「21px」を$max-widthおよび "1.618"に$base-fontに割り当てます。その結果、最後のブレークポイントで無効なフォントサイズ宣言と行方不明のライン高プロパティを取得します。また、SASSはこれのエラーを報告していないため、物事が成功するかどうかはわかりません。メディアクエリに最大幅を使用しようとすると、フォントサイズ値（21pxのみ）になります。これは非常に役に立たない最大幅になると思います。 $vertical-rhythm

代わりにマップを使用する場合、値が欠落している場合でも、

関数は必要なものを提供します。これが私たちのトレードオフです。リストに載っているシンプルさと速度、マッピングの特異性とエラーの予防を失います。 map-get()

特定のリストをクエリ

ネストされたリストの使用に関する別の関連する問題は、特定のリストを照会することです。マップにはキーがあるため、

：map-get()を使用して任意のサブマップにすばやくアクセスできます。

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

ネストされたリストから中リストのデータを取得するには、より複雑な機能が必要です。

この関数は、

のすべてのリストをループし、必要なラベルの最初の値をチェックし、一致が見つかった場合にリストを返します。一致が見つからずに

<code>@each $label, $map in $breakpoint-map {}</code>

ループの終了に到達した場合、nullを返します。基本的には、リストの

の素早い自家製の解釈であり、最初の値を擬似キーとして使用します。 $breakpoint-list @eachマッピング関数の欠落map-get()

SASSには、マッピングを処理するための多くの有用な機能があります。ネストされたリストは同じ関数に存在しません。たとえば、

を使用して、マップに追加のキー値ペアを追加できます。共有キーを使用して

を使用して、共有キーの値を更新します。

またはmap-merge()を使用して新しいリストを追加できますが、map-merge()をシミュレートする更新関数には別のカスタムSASS関数が必要です。 join() append()もう1つの便利なマッピング関数はmap-merge()です。この関数は、

に依存するカスタム関数を検証するのに役立ちます。ただし、リストに匹敵する機能はありません。

map-has-key()サシル奏者を使用して、リストのマッピング関数をシミュレートできます。 （このライブラリは、SASSがマッピングサポートを追加する前にこれらの機能を提供しました。）map-get()

結論

マップはキー値のペアを使用するため、リストよりも強力です。追加のSASSマッピング関数は、データを見つけてマッピングされた値を検証する実用的な方法を提供します。

ネストされたSASSリストは、書き込みと維持がより速くなる可能性がありますが、エラーチェックや詳細なクエリのマッピングほど適していない場合があります。ほとんどの場合、冗長性は増加していますが、マッピングがより良い選択肢だと思います。コードの小さなブロックと片足ループの場合、ネストされたリストを使用することがありますが、マッピングはプロジェクト全体の設定とデータストレージにより適しています。

作業のいずれかでマップとネストされたリストを比較したことがありますか、それともコードをリファクタリングして、一方よりも優先順位を付けましたか？コメントであなたの経験を共有してください！

このサスマイスターの要点でこのチュートリアルで使用されているコードを見ることができます。

SASSマッピングおよびネストされたリスト（FAQ）

のFAQ サスマップとネストされたリストの主な違いは何ですか？

SASSマッピングとネストされたリストは、どちらもSASS Preprocessorsの強力なツールですが、明らかな違いがあります。 SASSマップは、他のプログラミング言語の連想配列に似ており、各値は一意のキーに関連付けられています。これにより、データを簡単に取得、更新、操作できます。一方、ネストされたリストは、JavaScriptの配列と同様の一連の値です。これらは、さまざまな値を保存して反復する必要がある場合に最適ですが、マッピングによって提供される特定の値に直接アクセスする能力がありません。

SASSマッピングの使用方法は？

SASSマップを使用するには、まず、コロンで区切られた各キー価値ペアのペアでマップを定義する必要があります。たとえば、

。次に、次のように、

関数を使用してマップ内の値にアクセスできます。 $map: (key1: value1, key2: value2) map-getネストされたリストのようにサスマップをネストできますか？ map-get($map, key1)

はい、ネストされたリストのようなSASSマップをネストできます。これは、関連するデータを結合する場合に特に便利です。ネストされたマップ内の値にアクセスするには、

関数を2回使用する必要があります：

。

map-get SASSマップを反復する方法は？ map-get(map-get($map, key1), key2)

ディレクティブを使用して、SASSマップを反復させることができます。

ディレクティブは、キーと値の2つの変数を取ります。例は次のとおりです。

。 @each @eachネストされたリストの代わりにSASSマッピングを使用することの利点は何ですか？ @each $key, $value in $map { … }

SASSマッピングには、ネストされたリストよりもいくつかの利点があります。特定の値に直接アクセスできるようになり、コードがより効率的かつ読みやすくなります。また、キー価値ペアの追加、削除、更新など、マッピングを操作するための組み込み関数も提供します。

ネストされたリストをSASSマップに変換できますか？

はい、

関数を使用して、ネストされたリストをSASSマップに変換できます。この関数は、ペアのリストを取得し、各ペアがマップ内のキー価値ペアであるマップを返します。

SASSでネストされたリストを使用する方法は？

。次に、次のようにリスト内の値にアクセスするには、$list: (value1, value2, value3)関数を使用できます。 nth nth($list, 1)SASSマップとネストされたリストを同時に使用できますか？

はい、SASSマッピングとネストされたリストの両方を使用できます。たとえば、マッピングを使用して一連のリストを保存し、その逆も同様です。これは、複雑なデータ構造を整理するのに役立ちます。

SASSマッピングまたはネストされたリストを使用することの制限は何ですか？

SASSマッピングとネストされたリストは強力なツールですが、いくつかの制限があります。たとえば、SASSマップにはキーを重複させることはできず、マップ内のキーの順序を保証することはできません。同様に、ネストされたリストが大きすぎたり複雑すぎたりすると、管理が困難になる場合があります。

SASSマップまたはネストされたリストを使用する選択は、特定のニーズに依存します。特定の値に直接アクセスしてデータを操作できる場合は、SASSマッピングが最良の選択かもしれません。一連の価値を保存して反復するだけである場合、ネストされたリストで十分です。

以上がSASSマップとネストされたリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。