如何在Sass map循环中同时获取key、value和索引值？

这完全可行，给你两种实用的解决办法：

方法一：用计数器配合@each循环 #

直接在@each循环外初始化一个计数器变量，每次循环时自增，就能同时拿到key、value和索引：

$breakpoints: (
  'large': 1200px,
  'medium': 1024px,
  'tablet': 768px,
  'mini': 480px
) !default;

// 初始化计数器
$index: 0;
@each $key, $value in $breakpoints {
  // 每次循环自增索引
  $index: $index + 1;
  
  // 这里可以直接使用三个变量
  .breakpoint-#{$key} {
    content: "索引#{$index}: 断点#{$key} = #{$value}";
  }
}

方法二：将Map转为列表后用@for循环 #

先把Map转换成包含键值对的列表（用map-pairs()函数），再通过@for遍历列表的索引，拆分出对应的key和value：

$breakpoints: (
  'large': 1200px,
  'medium': 1024px,
  'tablet': 768px,
  'mini': 480px
) !default;

// 将Map转为键值对列表
$breakpoint-list: map-pairs($breakpoints);

@for $i from 1 through length($breakpoint-list) {
  // 获取当前索引对应的键值对
  $pair: nth($breakpoint-list, $i);
  $key: nth($pair, 1);
  $value: nth($pair, 2);
  
  // 使用三个变量
  .breakpoint-#{$key} {
    content: "索引#{$i}: 断点#{$key} = #{$value}";
  }
}

补充说明 #

你之前用index()函数返回null是正常的——SCSS的index()仅适用于列表，Map是键值对结构，和列表的存储逻辑不同，所以无法直接用它获取索引。

内容的提问来源于stack exchange，提问作者JoeD