scss 使用@each映射列表中的项目

Posted 2021-05-17

// on each iteration, the variable gets assigned to the current value from the list or map
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}


// a map has slightly different syntax
$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}



// compiled CSS
.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}