SCSS编译提示{ expected错误 无法定位问题位置求解决方案

编译出的CSS异常对应SCSS源文件的两处写法错误：

• 自定义mobile混入的媒体查询语法不规范：and关键字和后面的括号之间缺少必填空格，现有写法and(max-width: $mobile)不符合CSS/SCSS语法规则，会导致解析异常。
• 混入调用时的选择器逻辑完全错误：你要么是直接在全局根层级调用@include mobile，没有把样式包裹在具体元素选择器内；要么是写伪类时漏了&父选择器绑定符，最终才会编译出没有任何选择器前缀的无效CSS——你贴的生成代码里那几行flex-direction相关属性、裸的:hover规则都属于无效代码，浏览器无法正常识别应用。

1. 先修正mobile混入的语法，补全必填空格，修正后代码如下：

@mixin mobile {
  @media screen and (max-width: $mobile) {
    @content;  
  }
}

2. 全局排查所有调用@include mobile的位置，遵守两个写法规则：
   • 不要在全局根层级直接调用@include mobile写属性，要么把@include mobile写在对应元素的选择器块内部，要么在混入内容块里先写明确的选择器再写样式
   • 写嵌套伪类、伪元素时，必须加&绑定当前父选择器

错误写法示例（就是你当前触发bug的写法）：

// 全局直接调用混入，没有外层选择器
@include mobile {
  // 属性直接挂在媒体查询根下，无绑定选择器，无效
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  // 伪类前无&绑定，编译后是裸的:hover规则，无效
  :hover {
    color: pink;
  }
}

正确写法示例：

.card {
  display: flex;
  // 混入写在选择器块内部
  @include mobile {
    // 编译后自动带上.card选择器，规则生效
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    // 加&绑定父选择器，编译后为.card:hover，规则生效
    &:hover {
      color: pink;
    }
  }
}

改完之后重新编译SCSS，之前的异常CSS就会消失，样式规则也能正常生效。

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