SASS断点Mixin报错咨询：无效CSS值与断点不支持问题

你的方案完全可行，只是Mixin的逻辑和断点值定义存在两个关键问题，导致报错：

核心问题分析 #

1. 循环错误触发逻辑：
   原@each循环会遍历每个断点，只要当前循环的断点与传入值不匹配就立刻抛出错误。比如调用breakpoint(sm)时，第一个循环匹配xs不成立，直接触发@error，根本轮不到sm的匹配判断。

2. 断点值插值错误：
   原断点值定义中，xs是Sass map，sm是嵌套表达式，直接用#{$value}插值到@media时，Sass会将map/表达式转成带冗余括号的字符串，导致CSS语法错误。

修正后的代码 #

$breakpoints: (
  "xs": (max-width: 575.98px),
  "sm": (min-width: 576px, max-width: 767.98px),
  "md": (min-width: 768px, max-width: 991.98px),
  "lg": (min-width: 992px, max-width: 1199.98px),
  "xl": (min-width: 1200px, max-width: 1399.98px),
  "xxl": (min-width: 1400px),
);

@mixin breakpoint($user-value) {
  // 先校验传入断点是否存在
  @if not map-has-key($breakpoints, $user-value) {
    @error "This Breakpoint '#{$user-value}' isn't supported yet";
  }
  
  // 获取对应断点参数，直接传给@media（Sass原生支持map转媒体查询）
  @media map-get($breakpoints, $user-value) {
    @content;
  }
}

// 使用示例
body { 
  @include breakpoint(sm) {
    background-color: blue;
  }
}

关键修改点 #

• 用map-has-key一次性校验断点合法性，避免循环中多次触发错误
• 将多条件断点（如sm）改为单个map结构，Sass会自动转换为and连接的合法媒体查询
• 去掉手动字符串插值，直接利用Sass原生的@media对map的支持，生成正确CSS

修改后，所有断点都能正常编译，且通过Mixin大幅减少了重复的媒体查询代码，完全达到你的需求。

内容的提问来源于stack exchange，提问作者Ahmed Skaïk