less使用自定义函数完成简单自适应_less 自定义函数

参考：Less编写函数(mixin/@functions)的小技巧分享

1、自定义less全局函数
添加自定义函数在全局main.less里，并在main.js里引用main.less

// main.less
.remMixin() {
    @functions: ~`(function() { 
      var rem = 16;
      // px 转 rem
      this.px2rem = function(size) {
        return (size / rem) + 'rem';
      };
    })()`;
  }
  .remMixin();
1
2
3
4
5
6
7
8
9
10
11

// main.js
import './assets/less/main.less'
1
2

2、使用自定义函数

<style scoped lang='less'>
.pageTotal{
    width: ~`px2rem(44)`;
    font-size:  ~`px2rem(15)`;
}
1
2
3
4
5