【Sass】mapデータを使用するメモ

mapデータ

mapから取り出していろいろやってみる。

Sass

$set_size: (mb: 120px, pc: 360px, hf: 180px);

//mobile,pc,半分
/*通常の取り出し方 */
img {
  width: map-get($set_size, mb);
}

//map date 取り出し用関数
@function size($sizeName) {
  @return map-get($set_size, $sizeName);
}

/*関数使用後の取り出し方 */
img {
  width: size(mb);
  height: size(mb);
  padding: size(hf) 0 0 0;
  height: calc(100% - #{size(hf)});
}

//imgサイズの指定一括タイプ
@mixin img-size-s($img-s: 120px) {
  height: $img-s;
  width: $img-s;
}

/*imgサイズ一括呼び出し */
img {
  @include img-size-s;
}

コンパイル後

CSS

/*通常の取り出し方*/
img {
  width: 120px;
}

/*関数使用後の取り出し方*/
img {
  width: 120px;
  height: 120px;
  padding: 180px 0 0 0;
  height: calc(100% - 180px);
}

/*imgサイズ一括呼び出し*/
img {
  height: 120px;
  width: 120px;
}