scss 一个SCSS循环，将垂直（产品供应）与图标和彩色背景相结合。

Posted 2021-05-18

@mixin verticalLoop($vertical) {
  $vertical-image-path: "#{$image-path-content}/icons/verticals/";
  @each $color in color-black, color-white, color-honeycomb, color-clementine, 
 color-slushie, color-frosting, color-aloe, color-berry, color-wasabi,  
 color-grape, color-spice, color-wine, color-whale, color-honeycombLight, 
 color-clementineLight, color-slushieLight, color-frostingLight, 
 color-teaLight, color-berryLight, color-grapeLight, color-grayLightest, 
 color-grayLighter, color-grayLight, color-gray, color-grayDark, 
 color-grayDarker, color-grayDarkest {
    &.vertical-icon {
      background-image: url("#{$vertical-image-path}/#{$vertical}-color-black.svg") !important;
      &.vertical-icon-#{$color} {
        background-image: url("#{$vertical-image-path}/#{$vertical}-#{$color}.svg") !important;
      } // &.concept-icon-#{$color}
    } // &.concept-icon
  } // @each $color in  ...
}

li, div, tr {
 @each $vertical in local, adventures, amazon, at-home, citywide, deals, escapes, families, 
gourmet, nationwide, toad {
    &.#{$vertical},  &.#{$vertical} td {
      @include verticalLoop($vertical);
    } // &.#{$vertical}
  } // @each $vertical in...
} // li, div, tr