起因是最近公司开始了一个新项目,我在搭建基础框架的时候打算用一用 css3 的变量,之前没有了解过,只是在 elementplus 中看过这种写法。于是简单的了解了一下就直接开始用了,反正只是简单的用一下,做一个自定义主题的功能。
项目情况:
- amfe-flexible + postcss-pxtorem 实现页面的自适应
- css3变量维护一些布局上的全局属性
现在遇到的问题:
在开发左侧导航栏面板的打开与关闭时进行 导航栏面板宽度的动态修改。面板默认打开宽度是 120px,点击关闭后修改为90px。
css3 的变量定义如下:
初始化时dom样式属性是这样的:
点击关闭面板再打开面板后,发现css3变量作用域变了,上升到了 html 的内联定义了:
并且没有自动转换为 rem,自适应失效。
暂行的解决办法:
读取 postcss 的rootvalue,在动态修改css变量的时候手动转rem。
import remRootValue from '../../postcss.config';
// 获取配置的 rootValue
let scaleValue = remRootValue.plugins['postcss-pxtorem'].rootValue;
export const keepScale = (needToSize) => {
needToSize = needToSize / scaleValue;
needToSize = `${needToSize}`;
return `${needToSize.replace('rem', '')}rem`;
};
// 修改css变量的方法
let root = document.querySelector(':root');
let rootStyle = window.getComputedStyle(root);
const changeGlobalStyle = (globalProp, value) => {
root.style.setProperty(globalProp, value);
};
// 修改变量值
changeGlobalStyle('--asideWidth', keepScale(90));
changeGlobalStyle('--asideWidth', keepScale(120));
上面遇到的问题,希望大家能提供一个解决方案。我觉得可能是我对于css变量使用上的了解不足导致的问题。