less px轉rem插件

因爲開發移動端頁面,作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;
}
相關文章
相關標籤/搜索