如何在Sass mixin中使用@custom-media生成自定义媒体查询？

Sass原生支持@custom-media语法，报错是代码编写错误导致，核心问题有3处：

• 变量插值漏写$标识符：--#{breakpoint}应为--#{$breakpoint}，否则Sass会将breakpoint识别为原生CSS关键字而非Sass变量
• 媒体查询拼接多余引号：同时存在min、max断点时，给$media-query包裹的双引号会在插值后保留，导致媒体查询规则被识别为无效字符串
• @custom-media嵌套在选择器内：CSS规范要求@custom-media必须声明在顶层作用域，不能嵌套在普通选择器内部，不符合语法规则

修正后代码 #

@use 'sass:map';

@mixin custom-media($breakpoints) {
  $breakpoint-names: map.keys($breakpoints);

  @each $breakpoint in $breakpoint-names {
    $media-query: null;
    $min: map.get($breakpoints, $breakpoint, width, min);
    $max: map.get($breakpoints, $breakpoint, width, max);

    @if ($min) { 
      $min: (min-width: #{$min}); 
    }
    @if ($max) { 
      $max: (max-width: #{$max}); 
    }

    @if ($min and $max) {
      // 去掉多余引号，直接拼接Sass列表
      $media-query: $min and $max;
    } @else {
      $media-query: $min or $max;
    }

    // 补上$符号，正确读取变量
    @custom-media --#{$breakpoint}-media-query #{$media-query};
  }
}

// 直接在顶层调用mixin，不要嵌套在选择器内
@include custom-media((
  small: (
    width: (
      max: 40em,
    )
  ),
  medium: (
    width: (
      min: 40em,
      max: 80em,
    )
  ),
  large: (
    width: (
      min: 80em,
    )
  )
));

编译输出结果 #

@custom-media --small-media-query (max-width: 40em);
@custom-media --medium-media-query (min-width: 40em) and (max-width: 80em);
@custom-media --large-media-query (min-width: 80em);

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