因爲開發移動端頁面,作ui設配,使用less 做爲css預編譯語言,因爲或者本身才疏學淺,沒有找到現成關於lesspx轉rem的插件,或者對less語法不太夠熟練,採用這種極端的寫法,
特此開發:
..................................
不知道是本身腦殘,仍是咋的,看less文檔對插件的寫法,發現很差使,最終只能看less部分源碼,和
某些less插件的寫法,藉此做爲借鑑。
...................................
如下爲代碼:
文件名pxToRem.jscss
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裏配置webpack
const PxToRem = require('./pxToRem'); ... { loader: 'less-loader', options: { plugins: [ PxToRem, ], } ...
less 中使用web
.container { width: pxToRem(37.5px); }
會轉成less
.container { width: 1rem; }