如何在js中引入less的变量

less的定义

less 是一门 CSS 预处理语言，可以通过预处理器把less文件编译成css，less增加了变量、混合（mixin）、函数等功能，弥补了css的不足，让编写css更加方便

1：首先创建一个以.module.less为后缀的文件，在通过:export导出

variables.module.less

@color: #FF4754;
// 导出变量
:export {
  color: @color; 
}

2：在js中引入less对象

import variables from '@/variables.module.less'
console.log(variables)

3：输出结果

使用JS更改全局样式.less

最近公司里在做H5页面,需要吧页面分别展现到iOS,和Android上面所以说兼容成了问题,经过我不断百度终于找到了解决方案

1,在全局.less里先定义变量

:root {
  --top: 0px;
}

2,在全局去引用

.indexPage{
 padding-top: var(--top);
}

3,在js中控制变量

document.documentElement.style.setProperty('--top', top)

这个方法也可以应用到主题切换里

到此这篇关于如何在js中引入less的变量的文章就介绍到这了,更多相关js引入less变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！