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

相关推荐
uncleTom66612 分钟前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey14 分钟前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆23 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W27 分钟前
uniapp全局状态管理实现方案
前端
Vertira28 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
牧杉-惊蛰30 分钟前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript