相关技术
css3 var()
npm包 css-vars-ponyfill
var兼容性 这个表显示ie11支持var，但是ie11只是支持var的部分属性
一、var换肤
1、声明主体变量@primary （less）或 $primary（scss）
2、变量值用var表示，例如$primary: var(--primary，#123456)
3、所有需要改变的颜色都使用该变量
4、获取后端数据得到主题色，为主体插入–primary值，如下
let $sktmain = document.body
let primaryBgc = set16ToRgb(this.userInformation.themeStyle.mainColorValue || '#1063f1', 0.15)
$sktmain.setAttribute('style',`--primary:${this.userInformation.themeStyle.mainColorValue || '#1063f1'};--primaryBgc:${primaryBgc || '#ecf5ff'}`)
换肤原理
利用var操作变量进行换肤，如下图:预先设定scss变量primaryBgc，接收相关css变量--primary-color --primaryBgc-color
把需要换肤的组件的color border-color outline-color :hover :focus :active等均赋值为primaryBgc
优点：方便快捷
缺点：不兼容ie，ie11也不兼容
二、cssVars
当获取到后台返回相关主题色时，用cssVars对css变量--primary-color --primaryBgc-color进行改变
| /**`` ``* @function set16ToRgb`` ``* @description 该方法把16进制颜色转成rgba形式，换肤只提供了主题色，有些背景色也是需要根据主题色`` ``* 进行换肤的，所以我们通过该方法把16进制颜色转成rgb形式，同时加上opaticy生成相关背景色`` ``* @returns string rgba(...)`` ``*/``// 如果不用兼容ie，可以直接通过以下方式设置css变量`` ``let $sktmain = document.body.parentNode`` ``let primaryBgc = set16ToRgb(``this``.userInformation.themeStyle.mainColorValue || ``'#1063f1'``, ``0.15``)`` ``$sktmain.setAttribute(``'style'```,--primary-color:{```this``.userInformation.themeStyle.mainColorValue || ``'#1063f1'``};--primaryBgc-color:{primaryBgc || '#ecf5ff'```}`)```// 为了兼容ie换肤，引用cssVars，cssVars能够将var()函数转换为静态值，目前我们项目采用这种import cssVars from 'css-vars-ponyfill'axios().then(res=>{ cssVars({ rootElement: document.body.parentNode, variables: { '--primary-color': mainColorValue, '--primaryBgc-color': primaryBgc, }, })``})` |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
cssVars原理：便利style link标签相关数据，改变值
优点：兼容性比较好
缺点：性能消耗比较大
注意事项
- 把需要换肤的组件的样式均先用primaryBgc赋值一下，以便获取到主题色进项改变
- 关于对esign组件的换肤，请写在项目中的reset-color.scss（reset-color.less）文件内，尽量做到在该文件内部仅对esign组件的换肤颜色进行改变，请保持相关wiki 同步更新 ☁ 天印6.0换肤组件公共scss
- table中的type为text的button按钮是不需要换肤的，为其添加类名table-button--text
- 需要进行换肤的背景色，为其赋值变量$primaryBgc（@primaryBgc）
- 不需要换肤的颜色无需为其赋值$primary,直接设置属性#1063f1
相关文档
css-vars-ponyfill：jhildenbiddle.github.io/css-vars-po…
var兼容: caniuse.com/?search=var
