---

前言

主要讲js 中对于 css 的变量操作；
前端框架：antd框架

一、设置CSS变量？

document.body.style.setProperty('--primary', '#7F583F’);

二、读取变量

document.body.style.getPropertyValue('--primary').trim();

三、删除变量

document.body.style.removeProperty('--primary');

总结

1. 新建一个.css文件，.css文件代码部分如下：

@primary-color: rgba(0, 203, 171, 1);
@brand-primary: rgba(0, 203, 171, 1);
@brand-primary-tap: rgba(0, 203, 171, 1);// 辅助色 
@auxiliary-color: rgba(0, 203, 171, 0.5); // 加入购物车
// @auxiliary-color: rgba(0, 203, 171, 0.5); // 加入购物车// 次要色
@hypochromy-color: #fff;// 字体色
@text-color: #fff; //加入购物车//背景色
@background-add: ''; //加入购物车的按钮渐变背景@ghost-button-fill-tap: fade(@brand-primary, 60%);:root {--brand-primary: @brand-primary; //color.less中加入css原生变量： --brand-primary //主要色--auxiliary-color: @auxiliary-color; // 辅助色--hypochromy-color: @hypochromy-color; //  次要色--text-color: @text-color ; // 加入购物车字体色--background-add: @background-add ; //加入购物车的按钮渐变背景--search-boxColor: #fff; // 搜索框体色--searchText-color: #ccc; // 搜索框文字颜色
}

2. 设置–brand-primary变量颜色

document.documentElement.style.setProperty("--brand-primary", Data.Maincolor !== null ? Data.Maincolor : 'rgba(0, 203, 171, 1)');

3. 使用–brand-primary变量颜色

 color: var(--brand-primary);