Revision history [back]

To include key-value pairs and index numbers in a loop using a Sass map, you can use the map-loop function. Here is an example code snippet:

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
  danger: #dc3545,
  warning: #ffc107,
);

@each $name, $value in map-loop($colors) {
  $index: index($colors, $name);
  .#{name}-bg {
    background-color: $value;
  }
  .#{name}-text {
    color: $value;
  }
  .#{name}-index {
    font-size: $index * 10px;
  }
}

In this example, the map-loop function is used to loop through each key-value pair in the $colors map. The $name variable stores each key (e.g. "primary"), and the $value variable stores each value (e.g. "#007bff"). The index function is used to get the index number of each key-value pair within the map.

Inside the loop, you can use the #{} interpolation syntax to insert the $name variable into CSS selectors. You can also use the $value variable to set CSS properties, and the $index variable to perform calculations.