css - 如何在 less 中使用 symbol 作为 var？

Question

flex 属性太乱了。我想写一个 less 函数来解决这个问题。就像:

.flex(@grow:1,@shrink:1,@basis:auto){
	flex-grow:@grow;
	flex-shrink:@shrink;
	flex-basis:@basis;
}

关于“order”和“align”，我想用一个symbol-pre var，就像:

//function======================
.flex(@order){
	@number:replace(@order,#,);
	order:@number;
}


//usage======================
.test{
  .flex(#2);
}

//result======================
.test{
  order:2;
}

如何实现？非常感谢。

Answer 1

如果我理解正确的话，你似乎想将两个 mixin 合并为一个，并且你正在使用 # 来定义你正在设置 顺序，而不是增长。

如果你需要使用#，你可以将其格式化为字符串并使用mixin guards，像这样:

.flex (@grow: 1, @shrink: 1, @basis: auto) when (isnumber(@grow)) {
    flex-grow: @grow;
    flex-shrink: @shrink;
    flex-basis: @basis;
}

.flex (@order) when (isstring(@order)) {
    @number: replace(@order,'#','');
    order: ~'@{number}';
}

然后像往常一样对顶部使用mixin，当你想设置顺序时，写成:

.test {
    .flex('#2');
}