如何在LESS混合宏中按引用传递变量?
在LESS混合宏中实现类似“按引用传递变量”的效果
核心结论
LESS不支持传统编程语言中的“按引用传递变量”来直接修改外部变量,但可以通过动态变量名语法实现让混合宏修改调用作用域内指定变量的需求。
你的测试代码问题解析
你尝试用@@varname: 7;修改外部变量时报错,原因是:
- LESS不允许这种嵌套变量的赋值语法;
- LESS变量本质是按值传递,且拥有块级作用域,混合宏内部的变量赋值默认仅在宏的局部作用域生效,无法直接穿透到外部作用域。
针对图片断言需求的解决方案
你希望.assert-image-is-square混合宏在验证图片为正方形的同时,将图片尺寸赋值给指定变量,可通过以下方式实现:
修改混合宏,新增一个变量名参数,使用动态变量名语法赋值:
.assert-image-is-square(@src, @sizeVarName) { // 断言图片宽高相等,不满足则终止编译 assert_eq(image-width(@src), image-height(@src)); // 将图片尺寸赋值给指定变量(@{变量名} 是LESS动态变量名语法) @{sizeVarName}: image-width(@src); }
调用时传递变量名(注意不要带@符号):
@box_size: dummy; .assert-image-is-square('images/box.png', box_size); // 此时@box_size的值已被修改为图片的宽/高
原理说明
当混合宏在调用者的作用域中展开时,@{sizeVarName}会被解析为你传入的变量名,赋值操作直接作用于当前作用域的变量,从而达到让混合宏修改指定变量的效果。需要注意的是,必须在你想要修改变量的作用域内调用该混合宏,否则变量赋值仅会在宏的局部作用域生效。
内容的提问来源于stack exchange,提问作者Shtole
相关产品推荐
相关产品推荐

