Angular项目从CSS迁移到SCSS：媒体查询报错如何修改？

嘿，我之前在Angular项目从CSS转SCSS时也碰到过这个报错，太懂这种头疼的感觉了！这个错误Media feature required in media query expression本质上是SCSS对媒体查询的语法要求比普通CSS更严格，咱们来一步步解决它。

常见出错原因 #

普通CSS有时候会兼容一些不规范的写法，但SCSS作为预处理器，会严格校验语法。大概率是你的媒体查询犯了这两个错误之一：

• 媒体查询里遗漏了具体的媒体特性（比如只写了@media screen and就直接开括号，没加max-width这类条件）
• 媒体特性没有用括号包裹（比如写成@media screen and max-width:768px而不是@media screen and (max-width:768px)）

错误写法 vs 正确SCSS写法 #

先看看你可能写错的CSS代码（SCSS完全不认这种）：

// 错误示例1：缺少媒体特性
@media screen and {
  .header {
    height: 50px;
  }
}

// 错误示例2：特性没加括号
@media screen and max-width: 768px {
  .header {
    height: 50px;
  }
}

改成符合SCSS规范的写法就没问题了：

// 正确写法1：补充完整媒体特性并加括号
@media screen and (max-width: 768px) {
  .header {
    height: 50px;
  }
}

// 如果需要多个条件组合，每个特性都得加括号
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .header {
    height: 70px;
  }
}

SCSS进阶技巧：用变量简化媒体查询 #

SCSS的变量特性可以让媒体查询更易维护，比如把断点定义成变量，以后改值只需要改一处：

// 定义全局断点变量
$mobile: 768px;
$tablet: 1024px;

// 复用变量写媒体查询
@media screen and (max-width: $mobile) {
  .header {
    height: 50px;
  }
}

@media screen and (min-width: $mobile) and (max-width: $tablet) {
  .header {
    height: 70px;
  }
}

你只需要逐个检查项目里的所有媒体查询，确保每个@media都包含有效的媒体特性（比如max-width、orientation: portrait这类），并且特性都用括号包裹，就能解决这个报错啦！

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