最近想要使用less自定义函数动态计算px的值,但是搜了很久都没有找到,ai助手也不靠谱,然后自己去less官方文档找了下,没发现有自定义函数,但是看到了mixins可以实现自定义函数,具体方法如下,创建一个common.less文件(如果不需要多次复用函数,也可以在使用的less文件顶部创建),然后定义一个混入类用来模拟实现自定义函数,比如.average是一个混入对象mixin,也可以看做一个函数对象,然后变量result作文函数对象的一个属性,可以通过传入mixin的参数进行一些运算作为result属性的值,最后在需要使用的index.less文件顶部导入common.less。然后在需要赋值的属性调用并执行average类,并且在尾部要加上result属性。result这属性名可以随意取,并且属性名可以定义多个,然后根据需要取属性就行。
common.less
.average(@x, @y) {
@result: ((@x + @y) / 2);
}
index.less
import 'common.less' // 具体写法可能不正确,可以搜索如何引入less文件
div {
// call a mixin and look up its "@result" value
padding: .average(16px, 50px)[@result];
}
// 结果
div {
padding: 33px;
}
官方文档截图

860

被折叠的 条评论
为什么被折叠?



