如何在SASS中修改并新增border radius的$rounded变量定义？

要实现保留$rounded原有所有定义，只修改或新增部分键值对，你可以用Sass内置的map-merge()函数——它会合并两个map，且后面的map会覆盖前面map中重复的键，同时保留所有不重复的项。

具体操作步骤： #

• 先定义你需要修改/新增的自定义map，把要调整的键值对写在这里
• 用map-merge()把原始的$rounded和你的自定义map合并，重新赋值给$rounded

代码示例： #

// 原始的$rounded定义（如果是框架自带的，你不需要重复写，确保能访问到这个变量即可）
$rounded: (
  0: 0,
  'sm': $border-radius-root / 2,
  null: $border-radius-root,
  'lg': $border-radius-root * 2,
  'xl': $border-radius-root * 6,
  'pill': 9999px,
  'circle': 50%
);

// 定义你的自定义修改/新增项
$custom-rounded: (
  'xl': $border-radius-root * 4, // 覆盖原有xl的取值
  'xxl': $border-radius-root * 6 // 新增xxl这个新的圆角尺寸
);

// 合并两个map，自定义项在后，会覆盖原始map的重复键
$rounded: map-merge($rounded, $custom-rounded);

处理完成后，$rounded会保留原始所有的键值对（0、sm、null、lg、pill、circle），同时把xl的值改成你定义的$border-radius-root * 4，并且新增xxl这个新的项。

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