VSCode Live Sass Compiler未将SCSS中的Media Query编译到CSS

你的Media Query未被编译到CSS中的核心原因是**$bp-larger-than-desktophd变量未被正确定义或导入**，Sass编译器无法识别这个变量的取值，因此直接跳过了整个无效的@media规则。

具体分析： #

• Sass对变量的使用有严格要求：所有引用的变量必须先被定义，或者通过@import导入包含该变量的文件。你使用的是Skeleton的断点变量，但当前SCSS文件中既没有定义这个变量，也没有导入Skeleton的变量文件，导致编译器无法解析$bp-larger-than-desktophd的值。
• 当编译器遇到无法解析的变量时，会忽略整个依赖该变量的规则块，这就是为什么你的@media完全没有出现在编译后的CSS中。

解决步骤： #

1. 导入Skeleton变量文件
   如果你使用的是Skeleton的SCSS版本，确保在当前SCSS文件顶部导入对应的变量文件，例如：

   @import "path/to/skeleton/_variables"; // 替换为实际的文件路径
   

2. 手动定义变量
   如果你没有引入Skeleton的SCSS源文件，或者需要自定义断点值，可以直接在当前文件中定义该变量：

   // 根据Skeleton官方断点定义，larger-than-desktophd通常对应1200px或更高，可自行调整
   $bp-larger-than-desktophd: 1200px;
   

3. 检查编译日志
   打开VSCode的「输出」面板，切换到「Live Sass Compiler」标签，查看是否有变量未定义的错误提示，这能帮你快速定位问题。

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