less如何使用自定义函数?

最近想要使用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;
}

官方文档截图
在这里插入图述

参考less官方文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值