less项目定义函数

52 阅读1分钟

my-plugin.js

module.exports = {
    install: function (less, pluginManager, functions) {
      // px2vw 函数:按 375 设计稿转换为 vw
      functions.add('px2vw', function (px) {
        const value = (px.value / 375) * 100; // 计算公式简化:(px/375)*100vw
        return new less.tree.Dimension(value, 'vw'); // 直接返回 vw 单位
      });
  
      // px2375 函数:固定返回 px 单位
      functions.add('px2375', function (px) {
        return new less.tree.Dimension(px.value, 'PX');
      });
  
      // px2720 函数:按 720 设计稿(1.2 倍缩放)转换为 vmin
      functions.add('px2720', function (px) {
        const scaledPx = px.value * 1.2;
        const value = (scaledPx / 720) * 100; // (px*1.2/720)*100vmin
        return new less.tree.Dimension(value, 'vmin');
      });
    },
  };

放在根目录,less文件引入此插件@plugin "../../../../my-plugin";


.entry {
  height: 100vh;
  
  @media (max-width:480px) {
    width: px2vw(346) ;
    margin: 0 px2vw(16);
  }
  @media (min-width:481px) and (max-width:719px) {
    width: px2375(346) ;
    margin: 0 px2375(16);
  }
  @media (min-width:720px) and (min-height:720px) {
    width: px2720(346) ;
    margin: 0 px2720(16);
  }