如何添加新的边框半径定义？

Question

rounded

类是基于以下SASS变量生成的（我认为）

$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%
);

我想通过这样做来更新上面的定义

// Keep the originals and change only what I need to change
$rounded: (
  'xl': $border-radius-root * 4, // Updated
  'xxl': $border-radius-root * 6 // Added
);

你知道我怎样才能达到这个结果吗？

Answer 1

要修改

$rounded

SASS 映射并仅更新您想要的特定键，同时保持其余原始值不变，您可以使用 SASS 函数

map-merge

。这允许您将自定义值合并到现有地图中，而无需重新定义所有内容。

以下是实现此目标的方法：

1. 首先，保持原

   $rounded

   地图完好无损。
2. 然后，使用

   map-merge

   更新

   xl

   值并添加新的

   xxl

   值。

以下是如何实现这一点的示例：

// Original $rounded map
$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%
);

// Merging new values
$rounded: map-merge(
  $rounded, (
    'xl': $border-radius-root * 4, // Updated
    'xxl': $border-radius-root * 6 // Added
  )
);

此方法可确保原始

$rounded

地图除了您所做的特定更新外保持不变。

map-merge

函数采用两个映射并将它们合并，第二个映射（您的自定义值）覆盖任何现有键并在必要时添加新键。