如何在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变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用JavaScript 实现的人脸检测的方法和实例，非常的不错，这里推荐给大家，有需要的小伙伴参考下。2015-03-03
JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件
这篇文章主要介绍了JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件的相关资料,需要的朋友可以参考下2016-10-10
本篇文章主要介绍了浅谈mint-ui 填坑之路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了微信小程序实现动态显示和隐藏某个控件功能,涉及微信小程序事件响应及样式动态操作相关实现技巧,需要的朋友可以参考下2018-12-12
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样.闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等.2015-03-03
这篇文章主要介绍了js中如何对嵌套数组进行filter过滤问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了JS变量提升及函数提升实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了Javascript实现禁止输入中文或英文的方法实例,本文方法都是使用正则表达式实现,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了生产制造追溯系统之在线打印功能，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
JavaScript中的Canvas 是一个强大的 HTML5 元素,允许你通过编程方式创建图形、绘制图像和实现复杂的动画效果,在本文中,我们将深入探讨 JavaScript Canvas 的高级绘图和动画技术,并提供一个复杂的案例,以展示其潜力,需要的朋友可以参考下2023-10-10
最新评论