scss 萨斯地图

Posted 2021-05-18

$accent_colors: (
  "pink" : $cxo_pink, 
  "cyan" : $cxo_cyan, 
  "yellow" : $cxo_yellow, 
  "orange" : $cxo_orange, 
  "darkblue" : $cxo_darkblue
);


@each $color-name, $color-code in $accent_colors {
  ._#{$color-name} { // &._pink , &._cyan , etc
    background-color: $color-code;
  }
}


/* Generated css

._pink {
  background-color: #eaa7bd;
}

._cyan {
  background-color: #7ecefd;
}

._yellow {
  background-color: #fcd268;
}

._orange {
  background-color: #f7a700;
}

._darkblue {
  background-color: #001588;
}

*/