如何在js中引入less的变量
更新时间：2023年07月18日 11:22:48 作者：曹小维
这篇文章主要介绍了如何在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变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现自上而下字幕滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
之前在获取元素属性时,踩了个坑,记录一下,下面这篇文章主要给大家介绍了关于JS字符串截取出现的bug以及解决方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
JavaScript中for-in和for-of的不同之处及如何正确使用
这篇文章主要给大家介绍了关于JavaScript中for-in和for-of的不同之处及如何正确使用它们的相关资料,无论是for...in还是for...of语句都是迭代一些东西,它们之间的主要区别在于它们的迭代方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了JS正则表达式封装与使用操作,涉及javascript使用正则表达式针对邮箱、手机号、身份证、用户名、中文等简单验证操作技巧,需要的朋友可以参考下2019-05-05
本文主要详细介绍了JavaScript中的this指向与绑定规则，默认绑定，隐式绑定，显示绑定，new绑定这四个规则，文中有相关的代码示例供大家参考，感兴趣的同学可以阅读下2023-05-05
利用js的Node遍历找到repeater的一个字段实例介绍
本文教大家使用js的Node遍历找到repeater的一个字段的具体实现思路，感兴趣的朋友可参考下，希望可以帮助到你2013-04-04
这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了XMLHttpRequest 同步请求和异步请求,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
在本篇文章里小编给各位整理的是关于原生js实现文件上传、下载、封装等实例方法，需要的朋友们可以参考学习下。2020-01-01
转换函数、强制类型转换、利用js变量弱类型转换。2010-08-08
最新评论