问题描述:
一开始写的是:
@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