SCSS映射合并功能

Question

您好我正在尝试制作更高级的地图合并功能。目前我只有＆＃34;红色:(）;＆＃34;

full example on codepen

$red:   #f00;
$green: #0f0;
$blue:  #00f;
$colours: $red $green $blue;
$output: ();

@each $current-colour in $colours {
   $i: index($colours, $current-colour);
   $output: map-merge($output, ($i*100:$current-colour));
}

$rgbcolors (
     red: ( 
         //only this is being generated with the code
         100: $red,
         200: $green,
         300: $blue
     )
 ) !default;

我希望能够在地图中生成代码。

$rgbcolors (
     // I want to generate the code here So instead of applying the values inside the map I can make the "green" and the "blue" map headers and also create the values inside it
     red: ( 
         100: $red,
         200: $red,
         300: $red
     ),
     green: ( 
         100: $green,
         200: $green,
         300: $green
     ),
     blue: ( 
         100: $blue,
         200: $blue,
         300: $blue
     )
 ) !default;

然后再向前迈进一步，我想让第一和第三个值变亮和变暗。

......
green: ( 
    100: lighten($green, 5%),
    200: $green,
    300: darken($green, 5%)
 ),
.....

我需要@for和@each来完成这项工作吗？