js中使用less变量描述：除了全局的主题颜色之外，单个需要多处共用和频繁改变的或者可能需要动态切换的样式，可以在js

描述：除了全局的主题颜色之外，单个需要多处共用和频繁改变的或者可能需要动态切换的样式，可以在js中使用less变量实现。

核心步骤

新建less文件。文件名为文件名.module.less。
在Vue引入并引用。

代码


// 文件名.module.less

@color-on:red;
@width-on:50px;
@width-off:20px;

// 导出
:export {
    color:@color-on;
    widthOn；@width-on;
    widthOff:@width-off;
}

引入并引用

// 省略引用代码
const { color:colorOn,widthOn,widthOff } = 文件名
document.querySelector('#container').style.cssText = `
    color:${colorOn};
    width:${widthOff};
`

注：以上是局部引入的简便使用，需要全局引入可以查阅相关资料后配置文件。