我们想要实现一个 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'
}
})
}
}
