SCSS断点Mixin写法：可行性、语法规范及兼容性问询

一、写法完全可行 #

你给出的这种通过SCSS Mixin封装响应式字体样式的方案完全可行，是日常开发中处理响应式样式的常用手段——把不同断点下的样式逻辑封装到Mixin里，通过@include调用就能快速生成多断点样式，大幅减少重复代码，提升代码可维护性。

二、语法规范说明 #

你的示例代码整体符合SCSS语法规范，但可以做一些优化让代码更灵活：

• 避免冗余@if判断：把不同尺寸的字体、行高参数做成映射表，不用新增一种尺寸就加一个@if分支，扩展性更强
• 断点命名语义化：把min/mid/max改成sm/md/lg这类行业通用的语义化命名，更易理解
• 简化语法细节：SCSS中@if的括号可以省略，不过保留也不影响语法正确性

优化后的示例代码如下：

$breakpoints: (
  sm: 312px,
  md: 680px,
  lg: 1020px,
);

$font-configs: (
  xsmall: (
    sm: (font-size: 13px, line-height: 18px),
    md: (font-size: 15px, line-height: 20px),
    lg: (font-size: 18px, line-height: 26px)
  ),
  // 可直接新增其他尺寸配置
  small: (
    sm: (font-size: 15px, line-height: 22px),
    md: (font-size: 17px, line-height: 24px),
    lg: (font-size: 20px, line-height: 28px)
  )
);

@mixin fontsize($size-name) {
  // 输出基础断点样式
  @each $prop, $val in map-get(map-get($font-configs, $size-name), sm) {
    #{$prop}: $val;
  }

  // 遍历生成其他断点的媒体查询样式
  @each $bp-name, $bp-width in map-remove($breakpoints, sm) {
    @media only screen and (min-width: $bp-width) {
      @each $prop, $val in map-get(map-get($font-configs, $size-name), $bp-name) {
        #{$prop}: $val;
      }
    }
  }
}

p {
  @include fontsize("xsmall");
  margin: 1em 0;
}

三、浏览器兼容性达标 #

SCSS最终会被编译成标准CSS代码，你的示例编译后会生成普通的媒体查询规则，而min-width媒体查询是CSS2.1就支持的特性，兼容所有现代浏览器，包括IE9及以上版本（IE8及以下版本不支持媒体查询，但目前这类浏览器已基本退出主流使用场景）。只要你的SCSS编译工具（如dart-sass、node-sass）正常工作，输出的CSS代码就能被绝大多数浏览器识别。

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