如何解决CSS中Sass嵌套媒体查询编译异常-css教程-PHP中文网

根本原因是标准css要求@media必须为顶层规则，嵌套在选择器块内会生成非法css，ios safari等真实浏览器直接忽略整条规则；sass虽允许嵌套，但编译后若@media未平级输出，将导致移动端样式失效。

如何解决css中sass嵌套媒体查询编译异常

为什么Sass嵌套@media会编译出错或失效

根本原因不是语法不支持，而是嵌套位置导致生成非法CSS或浏览器不认。标准CSS里@media必须是顶层规则，不能出现在选择器块内部；而Sass允许嵌套，但编译后若输出@media被包在.card { ... }里面，真实移动端（尤其是iOS Safari）会直接忽略整段规则——DevTools模拟正常，真机白屏或样式回退。

检查编译后的CSS：搜索@media，看每条规则是否以@media开头、后面紧跟{，而不是缩进在某个选择器块里
常见诱因：Vue单文件组件中<style lang="scss"></style>里写了.list { @media (max-width: 768px) { ... } }
VS Code开启“显示空白字符”（Ctrl+Shift+P → Toggle Render Whitespace），确认@media前没有隐藏空格或制表符

Sass里用@mixin封装@media比硬嵌套更稳

硬写@media (min-width: 992px)的问题是分散、难维护、易拼错。换成@mixin后，断点逻辑收口，调用位置自由，且不会因嵌套深度影响输出结构。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

定义统一断点变量：$breakpoints: ("sm": 480px, "md": 768px, "lg": 992px);
封装安全@mixin：@mixin respond-to($breakpoint) { @media (min-width: map-get($breakpoints, $breakpoint)) { @content; } }
组件内调用：.card { padding: 20px; @include respond-to(md) { padding: 16px; } }——编译后就是平级@media块，不带父选择器
避免在@mixin内部再写@media，除非你明确控制其调用上下文（比如只用于工具类生成）

嵌套层级过深时&和@media一起用的陷阱

当.card { .header { &__title { @media (hover: hover) { &:hover { } } } } }这种写法出现，&会展开为.header__title，但外层嵌套路径仍被带入，最终生成.card .header .header__title:hover——权重飙升，且@media实际被套在选择器链里，部分浏览器拒绝解析。

响应式交互样式（如:hover）优先提到顶层：@media (min-width: 768px) { .card__title:hover { } }
想保留组件上下文？用变量暂存：$block: ".card"; #{$block}__title { @include respond-to(md) { ... } }
禁用&:hover在多层嵌套中出现，尤其父选择器本身已含ID或复合类（如#app .layout .sidebar）
用@at-root (with: media)强制把媒体查询提级：.btn { &:hover { @at-root (with: media) { @media (max-width: 768px) { color: red; } } } }