SASS媒体查询混合宏如何兼容预设断点与自定义值？

首先假设你现有的混合宏和断点映射表大致如下（如果你的结构不同，核心逻辑可直接复用）：

// 预设断点映射表
$breakpoints: (
  extrasmall: 320px,
  small: 480px,
  medium: 768px,
  large: 1024px
);

// 原混合宏（仅支持断点名称）
@mixin breakpoint($name) {
  @media (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}

要让它同时支持预设名称和自定义像素值，只需添加参数类型判断逻辑：通过map-has-key检查传入值是否为预设断点的键，是则取对应像素；如果是数字或带单位的尺寸，则直接使用该值（还能兼容无单位数字自动转px）。

修改后的混合宏 #

// 预设断点映射表
$breakpoints: (
  extrasmall: 320px,
  small: 480px,
  medium: 768px,
  large: 1024px
);

@mixin breakpoint($value) {
  $breakpoint-value: null;

  // 1. 匹配预设断点名称，取映射表里的对应值
  @if map-has-key($breakpoints, $value) {
    $breakpoint-value: map-get($breakpoints, $value);
  } 
  // 2. 无单位数字自动转为px单位
  @else if unitless($value) {
    $breakpoint-value: $value * 1px;
  } 
  // 3. 无效字符串（不存在的断点名称）抛出警告
  @else if type-of($value) == 'string' {
    @warn "断点名称「#{$value}」未在预设映射表中定义，请检查输入。";
    $breakpoint-value: $value; // 仍尝试使用该值，也可改为@error直接终止编译
  } 
  // 4. 带单位的自定义值（如715px、20em等）直接使用
  @else {
    $breakpoint-value: $value;
  }

  @media (min-width: $breakpoint-value) {
    @content;
  }
}

使用示例 #

• 调用预设断点名称：

.nav {
  @include breakpoint(small) {
    flex-direction: row;
  }
}

• 传入自定义像素值：

.product-card {
  @include breakpoint(715px) {
    grid-template-columns: repeat(2, 1fr);
  }

  // 支持直接传无单位数字（自动转为px）
  @include breakpoint(850) {
    gap: 1.25rem;
  }
}

额外说明 #

• 该修改不仅支持自定义px值，还兼容em、rem等其他长度单位；
• 加入错误警告机制，避免拼写错误的断点名称导致静默失败；
• 如果需要支持max-width或其他媒体查询条件，可扩展混合宏参数（比如新增$query参数默认min-width），核心参数判断逻辑保持不变。

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