脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js引入less变量

如何在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浏览器内置的四大Web Worker的使用详解

    JavaScript浏览器内置的四大Web Worker的使用详解

    webwork是通过js的方式唤起浏览器的内置api使用,辅助前端计算的一种方式,就像fetch、ajaix那样唤起浏览器的接口查询一样,下面小编就为大家简单介绍一下吧
    2025-11-11
  • js实现缓冲运动效果的方法

    js实现缓冲运动效果的方法

    这篇文章主要介绍了js实现缓冲运动效果的方法,涉及javascript操作元素运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • webpack4 配置 ssr 环境遇到“document is not defined”

    webpack4 配置 ssr 环境遇到“document is not defined”

    这篇文章主要介绍了webpack4 配置 ssr 环境遇到“document is not defined”，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Mock.js的安装与使用教程(摆脱后端同学的束缚)

    Mock.js的安装与使用教程(摆脱后端同学的束缚)

    Mock功能可以根据接口/数据结构定义、Mock规则配置、Mock 期望配置，自动生成模拟数据,且使用者可以根据需要灵活构造各种结构的接口数据,下面这篇文章主要给大家介绍了关于Mock.js的安装与使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • JS实现容器模块左右拖动效果

    JS实现容器模块左右拖动效果

    这篇文章主要为大家详细介绍了JS实现容器模块左右拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • antd项目实现彩蛋效果的详细代码

    antd项目实现彩蛋效果的详细代码

    这篇文章主要介绍了antd项目如何实现彩蛋效果,首先在components目录下创建Transform目录，包括index.css、index.js，index.js是主要的逻辑代码，下面对代码进行分析，需要的朋友可以参考下
    2022-09-09
  • js 通用javascript函数库整理

    js 通用javascript函数库整理

    js 通用javascript函数库整理，学习js的朋友可以参考下。
    2011-08-08
  • 借助script进行Http跨域请求:JSONP实现原理及代码

    借助script进行Http跨域请求:JSONP实现原理及代码

    script元素的src属性能设置URL并发起HTTP GET请求实现脚本操作HTTP可以跨域通信而不受限与同源策略，接下来为大家详细介绍下Http跨域请求实现，感兴趣的你可以参考下哈
    2013-03-03
  • js实现touch移动触屏滑动事件

    js实现touch移动触屏滑动事件

    在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类 似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以 通过touch event handler的event对象取到
    2015-04-04
  • JS eval代码快速解密实例解析

    JS eval代码快速解密实例解析

    这篇文章主要介绍了JS eval代码快速解密实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04

最新评论