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

qq_427506082024-10-31 9:55

问题描述：

一开始写的是:

复制代码

@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