如何在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变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript函数式编程(Functional Programming)纯函数用法分析
这篇文章主要介绍了JavaScript函数式编程(Functional Programming)纯函数用法,结合实例形式分析了javascript函数式编程中纯函数的函数依赖、所指透明等概念相关原理及使用技巧,需要的朋友可以参考下2019-05-05js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
这篇文章主要介绍了js时间戳转yyyy-MM-dd HH-mm-ss工具类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论