Sass関数map_html/css_WEB-ITnose

Map
Sass のマップはデータマップと呼ばれることが多く、 key:value のペアで表示される配列と呼ぶ人もいます。

1 $map: (2  $key1: value1,3  $key2: value2,4  $key3: value35 )

まず、Sass に似た変数があり、 $ と名前空間を使用して マップ を宣言します。その後に括弧 () が続き、 key:value の形式でデータを割り当てます。キーと値はペアで表示され、各ペアはコンマ (,) で区切られます。グループの後にはコンマはありません。
キー key は、関連付けられた値 value を見つけるために使用されます。マップを使用すると、キーの値を収集して動的に挿入することが簡単になります。

1 $default-color: #fff !default;2 $primary-color: #22ae39 !default;

1 $color: (2  default: #fff,3  primary: #22ae394 );

新しいカラー変数値を追加する必要があります。これはマップ内に自由に追加できます:

1 $color: (2  default: #fff,3  primary: #22ae39,4  negative: #d9534f5 );

を使用すると、マップをネストマップにできます。キー:値のペアを 1 つ以上入力し続けることができます:

1 $map: (2  key1: value1,3  key2: (4  key-1: value-1,5  key-2: value-2,6  ),7  key3: value38 );

スキン変更プロジェクトに遭遇したことがありますか? スキンの各セットには多くの色が対応している可能性があるため、この関数を使用して管理します。カラー変数は非常に整理されており、維持および管理が簡単です。次のように使用できます:

 1 $theme-color: ( 2  default: ( 3  bgcolor: #fff, 4  text-color: #444, 5  link-color: #39f 6  ), 7  primary:( 8  bgcolor: #000, 9  text-color:#fff,10  link-color: #93f11  ),12  negative: (13  bgcolor: #f36,14  text-color: #fefefe,15  link-color: #d4e16  )17 );

Sass Maps の機能

先ほど変数を管理するためのマップの使用を紹介しましたが、Sass で変数を取得する必要があります。 Map をさらに活用する 意味のある操作を行うには、map 関数を使用する必要があります。 Sass では、map 自体に 7 つの関数が付属しています:

map-get($map,$key): 指定されたキー値に基づいて、マップ内の関連する値を返します。

map-merge($map1,$map2): 2 つのマップを新しいマップにマージします。

map-remove($map,$key): マップからキーを削除し、新しいマップを返します。

map-keys($map): マップ内のすべてのキーを返します。

map-values($map): マップ内のすべての値を返します。

map-has-key($map,$key): 指定されたキー値に基づいてマップに対応する値があるかどうかを判断し、ある場合は true を返し、そうでない場合は false を返します。

keywords($args): キーと値を動的に設定できる関数のパラメータを返します。

Sass Maps function-map-get($map,$key)map-get($map,$key) この関数の機能は、$key に基づいて $key を返すことです。 $ のパラメータ マップ内の対応する値 value。 $key が $map に存在しない場合は、null 値が返されます。この関数には 2 つのパラメータが含まれています:

$map：定义好的 map。$key：需要遍历的 key。

$social-colors のマップが定義されていると仮定します:

1 $social-colors: (2  dribble: #ea4c89,3  facebook: #3b5998,4  github: #171515,5  google: #db4437,6  twitter: #55acee7 );

Facebook

キー値 に対応する値 #3b5998 を取得したいとします。 map-get( ) 関数を使用して実装します:

コンパイルされた CSS:

)) $

))

1 .btn-dribble{2  color: map-get($social-colors,facebook);3 }

$key が $map にない場合、

は CSS をコンパイルしません。実際、Sass では、map-get($social-colors,weibo) は null 値を返します。ただし、コンパイルされた CSS では、スタイルがコンパイルされないことだけがわかり、コマンド ターミナルでコンパイルするときにエラーや警告メッセージは表示されません。スタイルをコンパイルできない理由、または null 値が返された理由がわかりません。経験が豊富ではないため、トラブルシューティングは簡単ではありません。機能をカスタマイズして判定を加えると全く違います。

Sass Maps function-map-has-key($map,$key)

map-has-key($map,$key) 関数はブール値を返します。 $map に

この $key が含まれている場合、関数は true を返し、それ以外の場合は false を返します。

$key が $map にない場合、map-get($map,$key) 関数を使用すると null 値が返されます。しかし、開発者にとっては、すぐに情報が得られるわけではありません。この状態は、map-has-key($map,$key) 関数を使用すると変更できます。

colors():

などの関数をカスタマイズします。

1 .btn-dribble {2  color: #3b5998;3 }

ターミナルを使用してコンパイルすると、エラー メッセージが表示されます。

コンパイルされた CSS:🎜 🎜

1 .btn-weibo{2  font-size: 12px;3  color: map-get($social-colors,weibo);4 }

🎜 🎜同時に、コマンド ターミナルのプロンプトが表示されます: 🎜 🎜

1 .btn-weibo {2  font-size: 12px;3 }

🎜 🎜@each を使用できます: 🎜 🎜

 1 @function colors($color){ 2  @if not map-has-key($social-colors,$color){ 3  @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; 4 } 5  @return map-get($social-colors,$color); 6 } 7 .btn-dribble { 8  color: colors(dribble); 9 }10 .btn-facebook {11  color: colors(facebook);12 }13 .btn-github {14  color: colors(github);15 }16 .btn-google {17  color: colors(google);18 }19 .btn-twitter {20  color: colors(twitter);21 }22 .btn-weibo {23  color: colors(weibo);24 }

🎜 🎜 🎜 🎜 🎜 🎜 🎜

Sass Maps的函数-map-keys($map)
map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表。如：

map-keys($social-colors);

其返回的值为：

"dribble","facebook","github","google","twitter"

1 $list: map-keys($social-colors);2 //相当于：3 $list:"dribble","facebook","github","google","twitter";

例：

1 @function colors($color){2  $names: map-keys($social-colors);3  @if not index($names,$color){4  @warn "Waring: `#{$color} is not a valid color name.`";5  }6  @return map-get($social-colors,$color);7 }

使用map-keys将 $social-colors 这个 map 的所有 key 取出，并赋予给一个名为 $names 的列表。然后通过 index($names,$color) 返回 $color 在 $names 位置，如果这个位置不存在，将返回提示信息，如果存在将返回正确的值。

也可以通过 @each 或者 @for 遍历出所有值：

@each:

1 @each $name in map-keys($social-colors){2  .btn-#{$name}{3  color: colors($name);4     }5 }

@for:

1 @for $i from 1 through length(map-keys($social-colors)){2  .btn-#{nth(map-keys($social-colors),$i)} {3  color: colors(nth(map-keys($social-colors),$i));4     }5 }

Sass Maps的函数-map-values($map)、map-merge($map1,$map2)
map-values($map)
map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，可以说也将是一个列表。而且，map-values($map) 中如果有相同的 value 也将会全部获取出来。

1 map-values($social-colors)2 //将会返回：3 #ea4c89,#3b5998,#171515,#db4437,#55acee

值与值之间同样用逗号分隔。
map-merge($map1,$map2)
map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法。

 1 $color: ( 2  text: #f36, 3  link: #f63, 4  border: #ddd, 5  backround: #fff 6 ); 7 $typo:( 8  font-size: 12px, 9  line-height: 1.610 );

两个 $map 合并成一个 map：

$newmap: map-merge($color,$typo);

将会生成一个新的 map:

1 $newmap:(2  text: #f36,3  link: #f63,4  border: #ddd,5  background: #fff,6  font-size: 12px,7  line-height: 1.68 );

这样你就可以借助 map-get()等函数做其他事情了。
注意:如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的：

Sass Maps的函数-map-remove($map,$key)、keywords($args)
map-remove($map,$key)
map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map。

$map:map-remove($social-colors,dribble);

返回的是一个新 map:

1 $map:(2  facebook: #3b5998,3  github: #171515,4  google: #db4437,5  twitter: #55acee6 );

如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样。

$map:map-remove($social-colors,weibo);

keywords($args)
keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。

 1 @mixin map($args...){ 2  @debug keywords($args); 3 } 4 @include map( 5  $dribble: #ea4c89, 6  $facebook: #3b5998, 7  $github: #171515, 8  $google: #db4437, 9  $twitter: #55acee10 );

在命令终端可以看到一个输入的 @debug 信息：

DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)