比较Sass与Less中自定义 rem 函数的差异实现方式

需求：在项目的一部分页面内引入响应布局，所以弃用了全局配置px自动转rem

1、设置html根元素为37.5px

this.$nextTick(function() {
     document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
})

2-1、sass

定义：

@function px2rem($px, $base-font-size: 75px) {
    @return ($px / $base-font-size) * 1rem;
  }

使用：

width: px2rem(600px);  //  设计稿的300px。

2-2、lesss

定义：

//定义一个变量和一个mixin
  @baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
  .px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
  }

使用：

.wrap{
    .px2rem(width,600); //  设计稿的300px。
  }