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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【04】【Maven项目热部署】将Maven项目热部署到远程tomcat服务器上

1.虽然现在Maven中央仓库中支持的tomcat插件只支持到tomcat7这个版本,但是可以利用这个插件对Web项目进行热部署,热部署到远程服务器的tomcat服务器上,远程服务器上的tomcat版本可以是更高的版本,比如说tomcat8、9、10或更高的版本…

开源一款前后端分离的企业级网站内容管理系统,支持站群管理、多平台静态化,多语言、全文检索的源码

大家好,我是一颗甜苞谷,今天分享一款前后端分离的企业级网站内容管理系统,支持站群管理、多平台静态化,多语言、全文检索的源码。 前言 在当今的数字化时代,企业网站和个人博客已成为信息传播和品牌建设的重要渠道。…

mfc | mfc集成opencv,实现摄像头监控、拍照、视频图像处理(亮度、对比度、色调、饱和度)功能

这里是引用 文章目录 一、开发环境二、MFC项目创建三、集成opencv3.1 opencv安装3.2 添加项目属性3.3 测试OpenCV(打开摄像头)3.4 OPENCV视频嵌入到弹框中 四、关闭摄像头、拍照功能实现4.1 添加按钮4.2 添加全局静态变量4.3 关闭摄像头功能实现4.4 拍照…

Rust 力扣 - 289. 生命游戏

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们记录上一行和当前行转换之后的状态,当前行转换之后的状态计算完毕后调整上一行状态,直至最后一行状态计算完毕后调整最后一行状态 题解代码 pub fn game_of_life(board: &mut V…

人工智能—机器学习-图像处理

1. 人工智能(AI) 定义:人工智能是计算机科学的一个分支,旨在开发能够模拟人类智能的系统,包括学习、推理、问题解决、感知和语言理解等能力。子领域: 机器学习(ML):使计…

连续型随机变量的数字特征

本文记录连续型随机变量的分布,以及数字特征 均匀分布 设随机变量 X X X 在区间 [ a , b ] [a, b] [a,b] 上均匀分布,则其概率密度函数(PDF)为: f ( x ) { 1 b − a , if a ≤ x ≤ b 0 , otherwise f(x) \begi…

【eNSP】华为ensp快速入门实验

一、安装准备 1. 检查和卸载已安装的软件 检查是否已经安装 eNSP 和依赖软件: 打开控制面板,点击“程序和功能”。 搜索列表中是否存在 eNSP 或依赖软件(如 WinPcap、Wireshark)。 卸载已安装的软件: 如果找到 e…

一:Linux学习笔记(第一阶段)-- 安装软件 vmware workstation 虚拟机软件 centos系统

目录 学习计划: 资源准备 虚拟机软件:就别自己找了 现在换网站了 下载比较费劲 Centos8: 阿里云镜像地址下载(下载比较版 但是有不同版本):centos安装包下载_开源镜像站-阿里云 百度网盘地址&#xff…

Java项目:165 springboot人事管理系统

作者主页:舒克日记 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 人事管理系统分为管理员和用户两部分操作角色 本次开发的人事管理系统实现了财务报销管理、字典管理、试卷表管理、试题表管理、考试记录表管理、答题…

计算机存储单元bit。不同编程语言类型差异。

计算机存储单元bit 大部分计算机最小内存操作单元是字节,JE不同编程语言类型差异JEDRAM标准DQ位宽也经常按8 bits为单位。英文字母ASCII码虽然可以优化为7位,但7不是一个计算机的好数字,按8位算是最优空间。当然,CPU也有提供位操作…

代码训练营 day53|LeetCode 42,LeetCode 84

前言 这里记录一下陈菜菜的刷题记录,主要应对25秋招、春招 个人背景 211CS本CUHK计算机相关硕,一年车企软件开发经验 代码能力:有待提高 常用语言:C 系列文章目录 第53天 :第十章 单调栈part02 文章目录 前言系列文…

单臂路由实现不同VLAN之间设备通信

转载请注明出处 本实验为单臂路由配置,目的为让不同VLAN之间的设备能够互相通信。 1.首先,按照要求配置两个pc的ip地址,以pc0为例子: 2在交换机创建vlan10和vlan20 3.划分vlan,pc0为vlan10的设备,pc1为vla…

【FL0013】基于SpringBoot和微信小程序的机电公司管理信息系统

🧑‍💻博主介绍🧑‍💻 全网粉丝10W,CSDN全栈领域优质创作者,博客之星、掘金/知乎/b站/华为云/阿里云等平台优质作者、专注于Java、小程序/APP、python、大数据等技术领域和毕业项目实战,以及程序定制化开发…

Vue3里抽离公共模块进行封装然后通过Vue进行调取

概述 直接使用引入也不是不可以直接进行调取,但是如果想走vue的话下面是解决方案 声明需要被插入的模块 //这里是要被插入的模块 import * as server from "@/axios/server"; //写入到vue里面方便后面从vue里面进行调取 export default {install(app) {app.confi…

2024保姆级微信 AI 机器人教程:如何打造私人和群聊助手

欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 *分享一个使用比较久的🪜 大家好,我是SunnyRun 微信 AI 机器人-人工智能技术,为用户提供服务的自动化系统:具备自然语言处理能…

Android——动态注册广播

BroadcastReceiver 发送一条广播,可以被不同的广播接收者所接收,广播接收者收到广播后再进行逻辑判断。 标准广播 通过 new BroadcastReceiver() 创建广播 通过 registerReceiver() 注册广播 通过 sendBroadcast() 发送广播 通过 unregisterReceiver(…

HyperWorks进阶教程:Altair及其软件介绍

1.1 Altair 简介 Allair是一家全球技术公司,在产品开发、高性能计算和数据智能领域提供软件和云解决方案自1985年成立以来一直致力于为企业的决策者和技术的执行者开发用于仿真分析、优化、信息可视化、流程自动化和云计算的高端技术。Altair 公司的总部位于美国密…

Halcon3D image_points_to_world_plane详解

分三个部分来聊聊这个算子 一,算子的参数介绍 二,算法的计算过程 三,举例实现 第一部分,算子的介绍 image_points_to_world_plane( : : CameraParam, WorldPose, Rows, Cols, Scale : X, Y) 参数介绍: CameraParam,:相机内参 WorldPose 世界坐标系,也叫物体坐标系(成…

使用GetX实现GetPage中间件

前言 GetX 中间件(Middleware)是 GetX 框架中的一种机制,用于在页面导航时对用户进行权限控制、数据预加载、页面访问条件设置等。通过使用中间件,可以有效地控制用户的访问流程,并在适当条件下引导用户到所需页面。 这…

【人工智能-初级】练习题:matplotlib基础练习30例

文章目录 练习 1: 画折线图练习 2: 画散点图练习 3: 画柱状图练习 4: 画饼图练习 5: 画直方图练习 6: 使用不同线型画折线图练习 7: 多条折线练习 8: 用不同颜色画散点图练习 9: 画堆叠柱状图练习 10: 画带网格的图练习 11: 画带标签的散点图练习 12: 画等高线图练习 13: 在图中…