我如何在 sass mixins 中使用@custom-media？

Question

我正在尝试在 mixin 中生成 @custom-media 条目，源自 sass 映射，但收到媒体查询不是有效的 css 值的错误

例如

@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) {
      $media-query: "#{$min} and #{$max}";
    }

    @else {
      $media-query: $min or $max;
    }

    @custom-media --#{breakpoint}-media-query #{$media-query};
  }
}
.root {
    @include custom-media((
        small: (
            width: (
                max: 40em,
            )
        ),
        medium: (
            width: (
                min: 40em,
                max: 80em,
            )
        ),
        large: (
            width: (
                min: 80em,
            )
        )
    ))
};

错误是(max-width: 40em) is'nt a valid css value.，尽管这正是我想要的值。 sass 不支持@custom-media 语法吗？

Answer 1

mixin 只能返回一个有效的 CSS 规则。 @custom-media ... 这不是有效的 CSS 规则。

如果要自定义断点，请创建 CSS var。