由于开发移动端页面,做ui设配,使用less 作为css预编译语言,由于或者自己才疏学浅,没有找到现成关于lesspx转rem的插件,或者对less语法不太够熟练,采用这种极端的写法,
特此开发:
..................................
不知道是自己脑残,还是咋的,看less文档对插件的写法,发现不好使,最终只能看less部分源码,和
某些less插件的写法,借此作为借鉴。
...................................
以下为代码:
文件名pxToRem.js
function Pxtorem(options = {}) {
const defaultOptions = {
basePx: options.basePx || 37.5,// 设计稿 跨度 /10
precision: options.precision || false, // px转成rem后的数字精度
}
this.options = Object.assign({}, defaultOptions, options);
}
Pxtorem.prototype.install = function (less, pluginsmannager, functionRegistry) {
const that = this;
functionRegistry.addMultiple({
pxToRem(pxObject, precisionObject) {
const {
options: {
basePx,
},
} = that;
let {
options: {
precision,
},
} = that;
const {
value: px,
} = pxObject;
precisionObject && (precision = precisionObject.value);
let rem = px / basePx;
if (precision !== false && typeof precision === 'number') {
rem = rem.toFixed(precision);
}
return `${rem}rem`;
},
});
};
// 数字精度转换
function controlPrecision (number, precision) {
const numberStr = String(number);
const numList = numberStr.split('.');
const lastNumStr = numList[1];
if ((lastNumStr && lastNumStr.length === 0) || (numberStr.length <= precision)) {
return numberStr;
}
if (numberStr.length > precision) {
const precisionLastNextBit = numberStr[precision];
const num = Number(precisionLastNextBit);
let outNumber = Number(numberStr.substr(0, precision));
num >= 5 && (outNumber++);
return outNumber;
}
}
module.exports = Pxtorem
使用方法在webpack里配置
const PxToRem = require('./pxToRem');
...
{
loader: 'less-loader',
options: {
plugins: [
PxToRem,
],
}
...
less 中使用
.container {
width: pxToRem(37.5px);
}
会转成
.container {
width: 1rem;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。