使用JS更改全局样式.less

最新推荐文章于 2023-09-21 17:50:25 发布
最新推荐文章于 2023-09-21 17:50:25 发布
阅读量3k 收藏 3
点赞数 5
分类专栏： js css 文章标签： javascript less 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49356003/article/details/122102927
版权
js 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

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

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

:root {
  --top: 0px;
}

2,在全局去引用

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

3,在js中控制变量

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

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

吴英琦
关注
专栏目录
全局修改样式(全局颜色更改)
shi19970609的博客
11-18 394
3.挂载vue.config.js。1.创建分类样式文件。2.scss定义变量。
less全局公共样式
流离宝宝的博客
09-18 1424
less全局公共样式vue.config.jscommon.lessa.vue 基于vue2和style-resources-loader(1.4.1) vue add style-resources-loader vue.config.js module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [
cssobj-less：JS中的LESS引导程序，动态更改LESS引导程序的变量等等！
02-12
少cssobj 基于将LESS用作JS对象 - 安装 npm i - g cssobj - converter npm i futurist / cssobj - less 用法 1.按照常规方式在folder写LESS： 文件：lessfiles / page.less @base : #f938ab ; @width : 100 px ; @padding : 10 px ; .box-shadow ( @style , @alpha : 50 % ) { box-shadow : @style rgba ( 0 , 0 , 0 , @ alpha ); } .box { width : ( @width * 2 ); padding : @padding ; color : saturate ( @base , 5 % ); border-color :
less/sass中变量通过js动态修改（基于css var变量方式）
qq_42152032的博客
06-22 3767
mounted(){ const bgImgUrl = this.APP && this.APP.options && this.APP.options.login && this.APP.options.login.bgImgUrl; bgImgUrl && document.querySelector(':root').style.setProperty('--bgImgUrl', `url(${bgImgUrl})`); //注意：此处必
Sass/Less进阶-Js操作修改变量
Hwyll的博客
08-31 2559
Sass/Less进阶-Js操作修改变量
Vue2.0设置全局样式(less/sass和css)
01-21
为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步：在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写，但是2.0版本中就不行，会报错提示解析错误 require('./common/less/index.less') 第二步：在build目录下的webpack.base.conf.js配置模块，只需要在 rules下面加两个模块即可 module.exports =
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
01-18
当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量，此时只在main.js中import是不行的。 目录结构如下： 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时，只用...
node-less-watcher:自动检测.less文件中的更改并重新编译样式
05-01
关于less.js依赖性 支持的版本是： 1.2.0和更高版本（ 3.7.1上次测试）。 安装 全球的 # npm install -g less-watcher2 当地的 $ npm install less-watcher2 $ ln -s ./node_modules/.bin/less-watcher 用法 显示...
vue2中全局less样式
cici_921的博客
10-23 868
vue2全局less样式
js学习总结----less基础和编译
weixin_30522095的博客
08-08 72
对于一些less的一些基本概念这里不在赘余，就来说说怎么使用吧 1、首先从官网下载less的js文件，例如less.min.js 2、编写less代码，示例代码如下 @color:#eee; @white-color:#fff; .transform-scale(@val:1){ -webkit-transform:scale(@val); -moz-t...
less.jsJavaScript文件
10-30
less.jsJavaScript文件- LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单
less.js的使用---初次使用
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
08-01 6195
第一次接触less.js； 我使用eclipse开发的，eclipse好像没有什么关于他的插件。 ①：使用时我们创建一个.less文件。 示例一个 @color: pink,yellow,red; div1{ background-color:extract(@color,2); } //这段代码div1的背景色就是yellow，括号里面的参数第一个代表自己声明的变量 //这个...
js教程 less基本规则以及在vue中使用
qq_36723759的博客
01-29 2227
less基本规则以及在vue中使用less的基本概念vue中使用lessless的注释less的嵌套规则与&less对于串行选择器的嵌套规则表示外部串行选择器的&标识符less中的变量与运算less中的变量less中的运算less中的混合less继承 less的基本概念 Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixi...
如何编译.less文件（less.js）
weixin_41105030的博客
12-03 4129
有多少种方式可以将.less文件转换为.css文件 Less给 CSS 加点料!Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言，因为 Less 和 CSS 非常像，学习很容易。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。官方文档 lessc 首先要安装node环境 全局安装npm/cnpm...
Vue2: 在vue项目中使用less全局变量,事件修改less变量
最新发布
qq_45061461的博客
09-21 5427
1.创建一个less文件 : 比如:variables.less//主题背景-查询按钮-分页的背景-滑块的背景-单选框的颜色 #1890ff//主题字体 #faad14 #1890ff//抛出自己定义的变量:export{
react项目中js动态修改less文件中的变量实现修改样式
qq_52888923的博客
07-15 1492
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
动态改变主题颜色，less变量动态改变
m0_56065511的博客
08-04 6920
主要是通过window.less.modifyVars(colorData).then(()=>{}).catch(()=>{})来改变less变量。做后台管理系统时，经常会遇到个人设置——对整个项目的颜色进行个性化的设置。2，配置setting.js(封装改变less变量的函数)1，color.less文件中配置颜色变量。...
前端学习（259）:flex-flow
歌谣的博客
12-30 406
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
Less混合（3）
weixin_44679078的博客
12-19 511
混合（mixins） 什么是混合 混合就是一种将一系列属性从一个规则集引入（“混合”）到另一个规则集的方式。 普通混合 例子： less编写 .bordered{ border-top:dotted 1px black; border-bottom: solid 2px black; } .post a { color:red; .bordered; } 编译结果 .bordered{ border-top:dotted 1px black; border-bottom: solid 2px
uniapp引入less全局样式
05-19
在uniapp中引入less全局样式，需要先安装less-loader和less依赖： ``` npm install less-loader less --save-dev ``` 然后在项目根目录下创建一个`vue.config.js`文件，如果已存在则直接修改。 ``` module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } } } ``` 上面的配置中，我们将less的`javascriptEnabled`设置为`true`，以便在样式文件中使用JavaScript。 接着在`App.vue`中引入全局样式文件，可以是`.less`或`.css`文件： ``` <style lang="less"> @import "@/assets/styles/variables.less"; @import "@/assets/styles/mixins.less"; @import "@/assets/styles/global.less"; </style> ``` 这里我们通过`@import`来引入全局样式文件，`@`表示项目根目录。 最后，在样式文件中定义全局变量和混合器，例如： ``` @primary-color: #409EFF; .border-radius(@radius: 4px) { border-radius: @radius; } ``` 在需要使用的地方直接调用即可： ``` .button { background-color: @primary-color; .border-radius(); } ``` 以上就是在uniapp中引入less全局样式的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值