Less mixins @functions

该功能和scss stylus的函数功能类似，只是less的是使用的js写法，更方便一点。

该功能未在文档找到用法特此记录。

步骤

开启javascriptEnabled

webpack

// module.rules
...
{
  test: /\.less/,
  exclude: /node_modules/,
  use: [
    'style-loader', 
    'css-loader', 
    {
      loader: 'less-loader',
      options: { javascriptEnabled: true }
    }
  ],
}
...

vite

...
css: {
  preprocessorOptions: {
    less: {
      javascriptEnabled: true,
    }
  },
},
...

实现

.remMixin() {
  @functions: ~`(function() {
    var clientWidth = '375px';
    function convert(size) {
      return typeof size === 'string' ? 
        +size.replace('px', '') : size;
    }
    // rem才是函数名
    this.rem = function(size) {
      return convert(size) / convert(clientWidth) * 10 + 'rem';
    }
  })()`;
}

.remMixin();

使用

.test{
  width: ~`rem("30px")`; // 0.8rem
}

参考