[分享]css原生变量android无效

最近在开发一个webapp的时候，发现在安卓设备上使用css原生变量无效。 在PC浏览器上使用CSS原生变量（Custom Properties）已经很普遍了，而CSS原生变量是指在CSS中以开头的变...

最近在开发一个webapp的时候，发现在安卓设备上使用css原生变量无效。

在PC浏览器上使用CSS原生变量（Custom Properties）已经很普遍了，而CSS原生变量是指在CSS中以--开头的变量，例如：

 :root {
        --primary-color: #333;
    }
    .box {
        background-color: var(--primary-color);
    } 

然而，在安卓设备上，CSS原生变量并不能像在PC浏览器上那样正常工作，导致样式不显示或解析错误。

经过一番研究，发现是安卓设备的浏览器（如Chrome, Firefox等）不支持CSS原生变量，可能是由于安卓设备的浏览器内核与PC的浏览器内核有所不同，导致这一问题的出现。

解决方案是使用JavaScript或Sass等技术进行兼容。其中，使用JavaScript实现CSS变量兼容的方法如下：

 let root = document.querySelector(':root');
    root.style.setProperty('--primary-color', '#333'); 

以上代码将通过JavaScript来动态设置CSS原生变量的值，从而兼容安卓设备上的浏览器。另外，Sass也提供了类似的解决方案。使用Sass的变量而非CSS原生变量，因为Sass可以将这些变量编译成浏览器可以理解的CSS代码，并且Sass可以生成不同版本的样式，从而实现兼容性。