SASS为何对合法媒体查询变量报错：‘X不是有效的CSS值’

问题复现 #

测试代码 #

$media-xs: screen and (max-width: 480px);

// 无报错
@media screen and (max-width: 480px) {
  .blu { color: blue; }
}

// 抛出错误
@media #{$media-xs} {
  .blu { color: blue; }
}

CLI运行报错信息 #

$ sass test.scss test.css

Error: (max-width: 480px) isn't a valid CSS value.
   ╷
13 │ @media #{$media-xs} {
   │          ^^^^^^^^^
   ╵
test.scss 13:10  root stylesheet

报错原因 #

直接使用#{}插值会把变量$media-xs的内容当作纯字符串解析，而媒体查询需要的是合法的CSS媒体查询表达式，字符串化后的内容会破坏原有表达式的语义，导致括号部分被识别为无效CSS值。

解决方案 #

方案1：直接引用变量，无需插值 #

Sass支持在@media规则中直接使用存储媒体查询条件的变量，不需要通过插值转换：

$media-xs: screen and (max-width: 480px);

// 正常编译
@media $media-xs {
  .blu { color: blue; }
}

方案2：使用Sass内置media()函数（Dart Sass 1.23+） #

如果使用新版Dart Sass，可以用内置的media()函数构建媒体查询变量，语义更清晰：

$media-xs: media(screen and (max-width: 480px));

@media $media-xs {
  .blu { color: blue; }
}

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