关于为何ios端页面展示正常但安卓端css样式不生效的可能问题

背景

之前一直用的Vue框架写代码，偶然用了一次原生写法，出现了标题所说问题。

原因

是因为我在html页面中的<style>标签中使用了sass语法，类似下图中的嵌套

代码不会报错情况下同时在Chrome浏览器中预览正常，导致没有第一时间意识到问题。

关于为什么Chrome能正常渲染通过查阅了解到：

关于css的嵌套语法目前市面上浏览器厂家并不是全都支持，而我刚好用的最新版的chrome和ios手机，这俩平台都支持，所以看到的效果都是正常的。但是在安卓机上就无法正常显示了。

总结

定位到安卓机有问题后，我们就通过手机调试发现控制台里对应元素的css嵌套被划横线，发现没解析出来才意识到css语法的问题，还是平时用框架写代码多了，<style scss>中直接用sass语法习惯了。