我們想要實(shí)現(xiàn)一個(gè) vw 的 less 函數(shù)，他具有這樣的功能：
.test {
height: vw(12); // height: 24px
width: vw(32); // width: 64
}
能夠?qū)⑽覀儌魅氲闹缔D(zhuǎn)成 2 * value + 'px' 的形式
1. 通過(guò) scss 實(shí)現(xiàn)
@function vw($value) {
@return $value * 2px;
}
// 使用
.test {
height: vw(12); // height: 24px
width: vw(32); // width: 64
}
2. 通過(guò) less 實(shí)現(xiàn)
less 的函數(shù)雖然也可以傳值，但是使用的混入的方式，不能像 scss 一樣返回一個(gè)值妄荔。
但 less 可以通過(guò)自定義函數(shù)插件的形式來(lái)實(shí)現(xiàn)
新建 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 函數(shù)聲明為全局函數(shù)
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'
}
})
}
}
