编写自适应字体mixin时CSS属性提示无效值是什么原因？

问题复现代码 #

@mixin adaptiv-font($pcSize, $mobSize){
$addSize: $pcSize - $mobSize;
$addMobSize: $addSize + $addSize * 0.7;
@media (max-width: 768px) {
    font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
}
@media (min-width: 768px) {
    font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
}  
}

错误原因 #

• 变量未定义：mixin入参仅声明了$pcSize、$mobSize，代码中直接使用$maxWidth但未赋值，编译后会在calc表达式中生成空值，导致CSS解析失败
• 单位拼接语法错误：$mobSize + px属于非法运算，Sass会将px识别为未定义字符串而非单位，最终生成格式错误的尺寸值
• 媒体查询断点冲突：两个媒体查询都命中768px宽度临界点，会导致样式覆盖异常
• 移动端尺寸计算逻辑错误：$addMobSize的硬编码乘法不符合视口自适应的线性插值规则，会导致尺寸计算不符合预期
• calc语法不规范：部分运算符两侧未留空格，浏览器无法正确识别运算逻辑

修复后代码 #

@mixin adaptiv-font($pcSize, $mobSize, $maxWidth: 1920) {
  $addSize: $pcSize - $mobSize;
  // 移动端适配区间为320px ~ 768px，对应宽度差为448px
  $mobBreakpointDiff: 768 - 320;
  @media (max-width: 767.98px) {
    font-size: calc(#{$mobSize}px + #{$addSize} * ((100vw - 320px) / #{$mobBreakpointDiff}));
  }
  @media (min-width: 768px) {
    font-size: calc(#{$mobSize}px + #{$addSize} * (100vw / #{$maxWidth}));
  }
}

使用说明 #

• 调用时传入纯数字参数即可，无需带单位，例如@include adaptiv-font(22, 14);代表PC端最大字号22px，移动端320px宽度下字号为14px
• $maxWidth默认值设为1920，对应常规PC端最大设计稿宽度，可根据实际项目需求传入自定义值
• 断点错开0.02px是为了兼容部分高DPI屏幕的临界点渲染问题

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