换肤功能（scss、css变量）
原创
产品 SaaS 化，通常需要有换肤功能
这里简单记录一下主题色及其衍生色（高亮、浅色）的更换功能
scss 全局定义
每个页面都有颜色，那么应该把颜色值定义在 global.scss 文件中，通过变量定义，比如
$color-primary: #4762FE;
$color-primary-dark: #3245D9;
$color-primary-light: #C2D1FF;
$color-primary-lightest: #EBF0FF;
$color-primary-transparency: rgba(71,98,254,0.1);每个页面的样式表引入此文件
@import './global.scss';
// 使用例子
.demo {
color: $color-primary
}这样，只要更改 scss 中全局变量的颜色值，就可以同步更改项目的颜色值
css 变量定义
思考如何注入颜色值？
这里就用到 css 的变量函数了：==var()==
之前有谈到使用 css 的变量以及赋值方法：Bilibili [冬] banner 早中晚切换效果
var() 函数用于插入自定义的属性值
两个参数：property，value
property：必填，自定义属性的名称，必需以 -- 开头
value：可选，备用值，在属性不存在的时候使用
比如
body {
--tempColor: #fff;
}
.temp {
color: var(--tempColor)
}设置其属性：DOM.style.setProperty(name, value)
这里就很清楚了，==scss 中全局变量引入的是 var() 函数的变量值==
获取衍生色
主题色是只有一个，需要通过主题色来获取其衍生颜色（高亮、浅色等）
scss 中提供一个方法：==mix()==
Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下：
mix($color-1,$color-2,$weight);$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量
$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重
如果指定的比例是 25%，意味着==第一个颜色==所占比例为 25%，第二个颜色所占比例为75%
此外，scss 还有一个 HSL 函数，也是设置颜色值的方法，这里就不过多探究了
坑来了
当我把 var() 函数获取的颜色值放进 mix 函数中，居然报错：
SassError: argument
$color-2ofmix($color-1, $color-2, $weight: 50%)must be a color
mix 函数无法使用带有 var() 函数变量的参数，HSL 函数也是；但普通变量是可以的
最终只能使用 js 函数通过主题色来获取衍生颜色
这里提供几个方法：
// str: 十六进制颜色值，n：透明度
export function colorRgba(str, n) {
// 十六进制颜色值的正则表达式
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
let sColor = str.toLowerCase()
n = n || 1
// 十六进制颜色转换为RGB格式
if (sColor && reg.test(sColor)) {
let sColorChange = getRgbNum(sColor)
return 'rgba(' + sColorChange.join(',') + ',' + n + ')'
} else {
return sColor
}
}
// 获取 rgb 颜色值
function getRgbNum(sColor) {
if (sColor.length === 4) {
let sColorNew = '#'
for (let i = 1; i < 4; i += 1) {
// 补全颜色值 例如：#eee,#fff等
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
// 处理六位颜色值
let sColorChange = []
for (let i = 1; i < 7; i += 2) {
// 核心代码，通过parseInt将十六进制转为十进制，parseInt只有一个参数时是默认转为十进制的，第二个参数则是指定转为对应进制
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
}
return sColorChange
}
// 加深或减弱颜色值
export function lightDarkenColor(color, num) {
let colorArr = getRgbNum(color)
let sColorChange = []
for (let i = 0; i < colorArr.length; i++) {
let val = colorArr[i] + num
if (val < 0) {
val = 0
}
if (val > 255) {
val = 255
}
sColorChange.push(val)
}
return 'rgba(' + sColorChange.join(',') + ',1)'
}最后只需要在==路由全局前置守卫==中计算颜色值，并赋值到 css 变量上，在 scss 全局变量中用 var() 函数引入 css 变量(各种颜色值)
换肤流程
通过接口获取主题色 --> js 计算衍生色值 --> 赋值到 css 变量 --> scss 全局变量用 var() 函数引入 css 变量 --> 页面样式引用 scss 全局颜色值
使用例子
global.scss
$color-primary: var(--primaryColor, #4762FE);
$color-primary-dark: var(--primaryDarkColor, #3245D9);
$color-primary-light: var(--primaryLightColor, #C2D1FF);
$color-primary-lightest: var(--primaryLightestColor, #EBF0FF);
$color-primary-transparency: var(--primaryTransparencyColor, rgba(71,98,254,0.1));路由守卫：
router.beforeEach((to, from, next) => {
const primaryColor = getConfigStyle() // 从接口获取的主题色
const colorObj = {
primaryColor: primaryColor,
primaryDarkColor: lightDarkenColor(primaryColor, -20),
primaryLightColor: colorRgba(primaryColor, 0.3),
primaryLightestColor: colorRgba(primaryColor, 0.12),
primaryTransparencyColor: colorRgba(primaryColor, 0.1)
}
Object.entries(colorObj).forEach(ele => {
// 逐个设置 css 变量到 body 上
document.body.style.setProperty(`--${ele[0]}`, ele[1])
})
next()
})原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。