Sass3.3 でマップを探索する (1)_html/css_WEB-ITnose

Sass のデータ型には、数値、文字列、リスト、色、ブール型が含まれており、ほとんどのニーズをカバーしています。ただし、フレームワークが進化し始めるにつれて、このデータ型には依然として重要なツールである連想配列が欠けています。

変数 $objects がここで作成され、リスト値が割り当てられます。

$objects: (キャロット、ソルト、チキン); リストは同時に複数のデータを定義できますが、配列のように対応するキーがありません。これらのデータにインデックスを付けるインデックスはありません。それでは、連想配列 (Sass では Maps と呼ばれます) を作成する方法を見てみましょう。

ここには、変数 $objects に追加および割り当てられたキーに対応する 3 つの同一の値があります。

$objects: (野菜: ニンジン、ミネラル: 塩、動物: 鶏肉); ご覧のとおり、これはリストと非常によく似ています。リスト関連の関数を実行することもできます。ここで変数 $objects には 3 つの値が格納され、各値には対応するキーがあります。ソルト値にインデックスを付けたい場合、それがどこにあるかを知る必要はなく、対応するキーをマップに渡すだけで済みます。

$just-a-pinch-of:map-get($objects,mineral); // $just-a-pinch-of == Salt なぜこれが新しいデータ型なのか、このデータ型は本当に存在するのか意味をなす？例を見てみましょう。

変数の管理 次のように変数が定義されているのをよく目にします。

$primary-nav-top-padding: .2em; -nav-line-height: 1.3; $secondary-nav-background: black; $secondary-nav-color: black; マップを使用すると、次のようにリストをオーバーレイできます:

$primary-nav: ( - top: .2em, margin-top: .2em, line-height: 1.3, ); $secondary-nav: (background:white, color:black, ); これは、各変数の単純なネストを作成します。グループとして作成することも可能です。

// Sass@mixin print-styles($map){@each $property, $value in $map { #{$property}: $value; } .primary-nav {@include print- styles($primary-nav); } // 出力された CSS .primary-nav { padding-top: .2em; margin-top: .2em; } マップについてさらに詳しく知るマップは、他のマップを含む任意のデータ タイプを保存できます。

// Sass $primary-nav: ( padding-top: .2em, margin-top: .2em, line-height: 1.3, nav-item: ( color:white; is-expanded:( padding -top: 1em, margin-top: 1em ) );@mixin print-styles($map, $keys...){ $i: 1; $length: length($keys);@while $length > = $i { $map:map-get($map, nth($keys, $i)); $i: $i + 1; }@each $property, $value in $map {@if type-of( $value) != マップ { #{$property}: $value; } } } nav.expanded {@include print-styles($primary-nav, nav-item, is-expanded) } print-styles @mixin A Map はネストされており、$keys が使い果たされるまで、その各サブマップが下方向にトラバースされます。これにより、各属性を反復処理して、それらを 1 つずつ出力できます。

// 出力された CSS nav.expanded { padding-top: 1em, margin-top: 1em, } $main-navigation を使用する代わりに、個々の変数をメイン ナビゲーションまたはサブ ナビゲーションのバリエーションにすることができます。 -nav-item-is-expanded-is-hovered-margin-top-on-the-blog-page.

来週は、map-get 関数を使用して変数から変数を呼び出す、マップの使用例を見ていきます。ここでは、Brad Wade が公開した記事「エネルギー省がモバイル戦略の再設計に Sass を採用した方法」を見てみましょう。

翻訳者の手話: 翻訳全体は元のテキスト行に従って実行され、テクノロジーに関する個人的な理解が翻訳プロセスに追加されます。翻訳に間違いがある場合は、同僚に指摘してもらってください。ありがとう！

転載する場合は出典を明記してください: Exploring Maps in Sass3.3 (1)