Question

flex属性太无序。我想写一个较少的功能来解决这个问题。就像：

＆＃13;

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

＆＃13;

关于＆＃34;命令＆＃34;和＆＃34;对齐＆＃34;，我想使用符号前变量，就像：

＆＃13;

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

＆＃13;

如何实现这一目标？非常感谢。

Answer 1

如果我正确理解这一点，您似乎想要将两个mixin合并为一个，并且您正在使用#来定义您正在设置order，而非grow。

如果您需要使用#，可以将其格式化为字符串并使用mixin警卫，如下所示：

.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');
}

如何在更少的情况下使用符号作为var？

1 个答案: