如何在Sass中基于Bootstrap容器变量计算各断点50%宽度容器

报错原因 #

$container-max-widths是Sass Map（键值对）类型变量，并非单个数值，直接对整个Map做除法运算属于非法操作，因此触发报错。

实现方案 #

不需要写固定数值，你可以通过Sass内置的map-get方法从Map中取出对应断点的宽度值再做计算，推荐直接遍历所有断点自动生成全量响应式类，后续修改全局容器配置时可以自动同步：

// 遍历所有断点生成对应50%宽度容器类
@each $breakpoint, $width in $container-max-widths {
  @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
    .is-style-container-50-#{$breakpoint} {
      max-width: calc(#{$width} / 2);
      /* 保留原.container的基础样式，不需要可以删除 */
      margin: 0 auto;
      padding: 0 var(--bs-gutter-x, 0.75rem);
    }
  }
}

如果只需要单独使用某个断点的宽度，也可以单独取值：

// 仅生成xl断点的50%宽度容器
.is-style-container-50-xl {
  max-width: calc(#{map-get($container-max-widths, xl)} / 2);
}

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