如何在sass mixin中使用@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变量