less解决function中return写法在浏览器被识别成Object导致样式失败的问题

问题描述:

一开始写的是:

@baseFontSize: 37.5px;//基于屏幕尺寸/10得出的基准font-size

// return失败,浏览器显示为[object Object],[object Object]
.pxToRem(@px){
  @value: @px / @baseFontSize * 1rem;
  @return @value;
}

使用height: .pxToRem(40px);之后浏览器却是这样:

解决方案一、(不使用return,改成属性名称: 属性值的形式)

@baseFontSize: 37.5px;//基于屏幕尺寸/10得出的基准font-size

.px2rem(@name, @px){
  @{name}: @px / @baseFontSize * 1rem;
}

 使用.px2rem(height, 40px);就正常了:

解决方案二、(使用自定义函数)

.remMixin() {
  @functions: ~`(function(){
    var rem = 37.5;
    this.pxToRem = function(size) {
      return (size / rem) + 'rem';
    }
  })()`;
}
.remMixin();

使用:

height: ~`pxToRem(40)`;

我的less插件和less-loader版本为 :

"less": "3.13.1",
"less-loader": "5.0.0",

代码仓库地址:

命运推手/my_web

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906741.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV视觉分析之目标跟踪(4)目标跟踪类TrackerDaSiamRPN的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::TrackerDaSiamRPN 是 OpenCV 中用于目标跟踪的一个类,它实现了 DaSiam RPN(Deformable Siamese Region Proposal Net…

高效视频制作大提速,视频剪辑软件的高级自定义命令功能批量调整视频的色调、饱和度和亮度,轻松驾驭视频编辑技巧

在浩瀚的数字海洋中,视频如同璀璨的星辰,而每一颗星辰都渴望被精心雕琢,闪耀出最独特的光芒。想象一下,你手握一把神奇的钥匙,能够轻松解锁批量视频剪辑的奥秘,让每一帧画面都跃动着你的创意与激情。这把钥…

Vue3入门--[vue/compiler-sfc] Unexpected token, expected “,“ (18:0)

新手小白学习Vue–入门就踩坑系列 问题描述 创建了一个Person.vue,保存后直接报错: [plugin:vite:vue] [vue/compiler-sfc] Unexpected token, expected "," (18:0) 在网上搜了半天也没找到原因,最后还得靠自己,现将解…

【制造业&盒子】箱子检测系统源码&数据集全套:改进yolo11-swintransformer

改进yolo11-MLCA等200全套创新点大全:箱子检测系统源码&数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意:由于项目一直在更新迭代,上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者视频可能为…

Spring Security 框架篇-深入了解 Spring Security 的认证功能流程和自定义实现登录接口(实现自定义认证过滤器、登出功能)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 Spring Security 框架概述 2.0 Spring Security 核心功能-认证功能 2.1 过滤器链 2.2 登录认证流程 2.3 思路分析 3.0 登录认证具体操作 3.1 环境搭建 3.2 实现 U…

HBuilderx修改主题色-改变编辑器背景颜色等

效果图: 第一步我们打开HBuilderX 选择工具 – 主题 – 选择(雅蓝) 然后再设置,源码视图里面打开Setting.json文件 3.将一下代码赋值到右侧用户设置即可 {"workbench.colorCustomizations": {// "[Defau…

食堂采购系统源码:实现供应链管理平台功能模块的技术实践

在当前数字化转型浪潮中,餐饮和食堂管理的需求越来越高,食堂采购系统逐渐成为企业和组织优化管理、降低成本的关键工具。 一、食堂采购系统的核心功能概述 一个完善的食堂采购系统不仅需要具备传统的订单管理、库存管理、供应商管理功能,还…

Python 工具库每日推荐 【Sphinx】

文章目录 引言文档工具的重要性今日推荐:Sphinx 文档生成工具主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:为 Python 项目生成 API 文档案例分析高级特性自定义主题国际化支持扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScript …

stm32不小心把SWD和JTAG都给关了,程序下载不进去,怎么办?

因为想用STM32F103的PA15引脚,调试程序的时候不小心把SWD和JTAD接口都给关了,先看下罪魁祸首 GPIO_PinRemapConfig(GPIO_Remap_SWJ_JTAGDisable,ENABLE);//关掉JTAG,不关SWGPIO_PinRemapConfig(GPIO_Remap_SWJ_Disable, ENABLE);//关掉SW&am…

Transformer+KAN系列时间序列预测代码

前段时间,来自 MIT 等机构的研究者提出了一种非常有潜力的替代方法 ——KAN。该方法在准确性和可解释性方面表现优于 MLP。而且,它能以非常少的参数量胜过以更大参数量运行的 MLP。 KAN的发布,引起了AI社区大量的关注与讨论,同时…

【OD-支持在线评测】文本统计分析(200分)

📎 在线评测链接 https://app5938.acapp.acwing.com.cn/contest/11/problem/OD1076 🍓 OJ题目截图 🍿 最新机试E卷,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 94 分 🌍 评测功能需要 ⇒ 订阅专栏 ⇐ 后私信联系解锁~ 文章目录 📎…

C++(友元、异常机制、静态成员、单例模式)

友元 友元可以访问与其好友关系的类中的私有成员,使用friend关键字进行修饰。(友元破坏了类的封装性)。 特点 (1)友元是单向的 (2)友元不能传递 (3)友元…

HTML 基础标签——表格标签<table>

文章目录 1. `<table>` 标签:定义表格2. `<tr>` 标签:定义表格行3. `<th>` 标签:定义表头单元格4. `<td>` 标签:定义表格单元格5. `<caption>` 标签:为表格添加标题6. `<thead>` 标签:定义表格头部7. `<tbody>` 标签:定义表格…

ElementUI中el-table双击单元格显示输入框

效果图 实现 <el-table:data"formData.products"row-key"id":show-header"true"style"width: 100%; margin-top: 16px"class"zq-table-theme-info"bordercell-dblclick"handleDbClick"> <el-table-col…

强化学习之父Richard Sutton给出一个简单思路,大幅增强所有RL算法

在当今的大模型时代&#xff0c;以 RLHF 为代表的强化学习方法具有无可替代的重要性&#xff0c;甚至成为了 OpenAI ο1 等模型实现强大推理能力的关键。 但这些强化学习方法仍有改进空间。近日&#xff0c;强化学习之父、阿尔伯塔大学教授 Richard Sutton 的团队低调更新了一…

一台手机可以登录运营多少个TikTok账号?

很多TikTok内容创作者和商家通过运营多个账号来实现品牌曝光和产品销售&#xff0c;这种矩阵运营方式需要一定的技巧和设备成本&#xff0c;那么对于很多新手来说&#xff0c;一台手机可以登录和运营多少个TikTok账号呢&#xff1f; 一、运营TikTok账号的数量限制 TikTok的官…

Rembg模型构建教程

一、介绍 Rembg&#xff0c;全称为“Remove Background”&#xff0c;是一款基于深度学习的图像背景去除工具。它的主要功能是通过智能识别图像中的前景物体&#xff0c;并将其从背景中分离出来&#xff0c;从而创建具有透明背景的图像。 二、基础环境 系统&#xff1a;Ubun…

AI直播带货场景切换模块的搭建!

AI直播带货&#xff0c;作为电商领域的新宠&#xff0c;正以其独特的魅力和高效的营销手段&#xff0c;引领着销售模式的新变革。 在AI直播带货中&#xff0c;场景切换模块是不可或缺的一部分&#xff0c;它不仅能够提升观众的观看体验&#xff0c;还能更好地展示商品&#xf…

力扣每日一题2024/11/2 3226. 使两个整数相等的位更改次数

class Solution:def minChanges(self, n: int, k: int) -> int:binary_n format(n, b)binary_k format(k, b)res0# 将两个二进制字符串长度对齐&#xff0c;前面补零max_len max(len(binary_n), len(binary_k))binary_n binary_n.zfill(max_len)binary_k binary_k.zfil…

.NET Core WebApi第6讲:WebApi的前端怎么派人去拿数据?(区别MVC)

一、前端界面小基础 head&#xff1a;引入CSS, 引入JS是写在head里面。 body&#xff1a;眼睛肉眼能看到的用户展示的界面是写在body里面。 二、前端怎么派人去拿数据&#xff1f; 1、MVC&#xff1a;前后端不分离&#xff0c;MVC相比WebApi只是多了一个views的文件夹 &am…