iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
Modern Web

菜鳥30日自學SASS及SCSS系列 第 28

【D-2 8】進階Sass的Maps 函數(2)

  • 分享至 

  • xImage
  •  

今日將介紹4種 Introspection()函數:
5.map-merge($map1,$map2)函數
6.map-remove($map,$key)函數
7.keywords($args…)函數

5.map-merge($map1,$map2)函數

將兩個map合併,得到新的map。

例如:

// scss //
$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);

$typo:(
    font-size: 12px,
    line-height: 1.6
);
$merge: map-merge($color,$typo);

.newsmap{
    color:map-get($merge,text);
    typo:map-get($merge,font-size);
    newmap:inspect($merge);
}

編|
譯| 有些文件寫到因為map不能轉純css所以使用inspect產生字符串。
後|
 V

// css //
.newsmap {
  color: #f36;
  typo: 12px;
  newmap: (
  text: #f36, 
  link: #f63,
  border: #ddd,
  backround: #fff,
  font-size: 12px,
  line-height: 1.6);
}

若 $map1、$map2 中有相同的 $key 名,那麼將 $map2 中的 $key 會取代$map1 。

例如:

// scss //
$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);

$typo:(
    font-size: 12px,
    line-height: 1.6,
    border: #aaa,
    backround: #bbb
);
$merge: map-merge($color,$typo);
.newsmap{
    color:map-get($merge,text);
    typo:map-get($merge,font-size);
    newmap:inspect($merge);
}

編|
譯| $key值 border、backround 皆在兩表中出現,則以$map2取代$map1。
後|
 V

// css //
.newsmap {
  color: #f36;
  typo: 12px;
  newmap: (
  text: #f36, 
  link: #f63, 
  border: #aaa,
  backround: #bbb, 
  font-size: 12px,
  line-height: 1.6);
}

6.map-remove($map,$key)函數

刪除當前 $map 中的某一個 $key,從而得到一個新的 map。

例如:

// scss //
$map-colors: (
    RED: #ff1500,
    ORANGE: #ff7b00,
    YELLOW: #fcda01,
    GREEN: #00ff2a,
    BLUE: #008cf8
);
$remove:map-remove($map-colors,RED);
.newmap{
    remove:inspect($remove);
}

編|
譯| 刪除 $key值RED 。
後|
 V

// css //
.newmap {
  remove: (
  ORANGE: #ff7b00,
  YELLOW: #fcda01, 
  GREEN: #00ff2a, 
  BLUE: #008cf8);
}

7.keywords($args…)函數

動態創建map的函數。可通過混合宏或函數的參數創建map。參數需成對出現。
其中$args 變成key(會自動去掉$符號),而$args對應的值就是value。

例如:

// scss //
@mixin map($args...){
    @debug keywords($args);
}

@include map(
    $RED: #ff1500,
    $ORANGE: #ff7b00,
    $YELLOW: #fcda01,
    $GREEN: #00ff2a,
    $BLUE: #008cf8
);

編|
譯|
後|
 V

DEBUG: (RED: #ff1500, ORANGE: #ff7b00, YELLOW: #fcda01, GREEN: #00ff2a, BLUE: #008cf8)

上一篇
【D-2 7】進階Sass的Maps 函數(1)
下一篇
【D-2 9】進階Sass的顏色函數(1)
系列文
菜鳥30日自學SASS及SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言