2022-08-05 随笔 less 自定义函数，实现传参返回值函数

我们想要实现一个 vw 的 less 函数，他具有这样的功能：

.test {
  height: vw(12); // height: 24px
  width: vw(32); // width: 64
}

能够将我们传入的值转成 2 * value + 'px' 的形式

1. 通过 scss 实现

@function vw($value) {
  @return $value * 2px;
}

// 使用
.test {
  height: vw(12); // height: 24px
  width: vw(32); // width: 64
}

2. 通过 less 实现

less 的函数虽然也可以传值，但是使用的混入的方式，不能像 scss 一样返回一个值。

但 less 可以通过自定义函数插件的形式来实现

新建 plugin.js 文件

// plugin.js
module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add('vw', function (param) {
      if (param.value) {
        return Number(param.value) * 8 + 'px'
      } else {
        return Number(eval(`${param.operands[0].value}${param.op}${param.operands[1].value}`)) * 8 + 'px'
      }
    })
  }
}

新建 test.less 文件

// test.less`
@plugin './plugin.js'

.test {
  height: vw(12); // height: 24px
  width: vw(32); // width: 64
}

3. 再 vite 中将 less 的 vw 函数声明为全局函数

vite.config.ts

export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "./src/styles/var/index.less";`,
        javascriptEnabled: true
      }
    }
  },
  // ...
})

src/styles/var/index.less

@plugin './vw.js'

src/styles/var/vw.js

module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add('vw', function (param) {
      if (param.value) {
        return Number(param.value) * 8 + 'px'
      } else {
        return Number(eval(`${param.operands[0].value}${param.op}${param.operands[1].value}`)) * 8 + 'px'
      }
    })
  }
}