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
}
评论