为何Sass自定义@mixin编译为CSS时未生效、未生成对应@media规则

核心问题诱因 #

• 混淆Sass编译期变量与CSS自定义属性的本质差异
  代码中以$开头的是Sass专属的编译期临时变量，仅在Sass编译过程中存在，不会被输出到最终CSS产物中；以--开头的是浏览器运行时的CSS自定义属性，必须通过标准CSS声明语法（属性: 值）才能在CSS中生效。原mixin内的赋值操作仅针对传入的Sass变量形参$var，完全没有触达--superVmin这个CSS自定义属性，最终产物中也从未声明过这个自定义属性，即使@media规则保留，也无法实现预期的动态赋值效果。
• 空CSS规则块被编译器自动丢弃
  两个@media块内部仅包含Sass层面的变量赋值逻辑，没有任何可被编译为CSS的实体语句（如属性声明、选择器规则）。Sass编译器检测到@media块没有有效输出内容时，会直接将整个块从产物中移除，这就是编译结果中完全看不到@media规则的直接原因。
• Sass变量作用域隔离机制
  mixin内部、嵌套@media块中声明的Sass变量属于局部作用域，赋值操作不会向外传递，既影响不到mixin外部的调用逻辑，也不会生成任何CSS代码。

可正常工作的修正方案 #

需要在@media块内编写实际会被编译输出的CSS自定义属性声明，通过插值语法把传入的自定义属性名转为可输出的CSS属性：

@mixin superVar($custom-prop, $number, $vh-val, $vw-val) {
  @media (min-aspect-ratio: 2/1) {
    // 输出真实的CSS自定义属性声明，而非给Sass变量赋值
    #{$custom-prop}: $number * $vh-val;
  }
  @media (max-aspect-ratio: 2/1) {
    #{$custom-prop}: $number * $vw-val;
  }
}

.frame {
  @include superVar(--superVmin, 1, 2vh, 1vw);
  width: calc(10 * var(--superVmin));
  height: 10vmin;
  background: red;
}

修正后编译生成的CSS会完整包含所有@media规则，--superVmin自定义属性也会根据视口纵横比被正确赋值。

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