如何使用符号作为更少的变量？

Question

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

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

关于 “秩序” 和 “对齐”，我想用一个符号预变种，就像：

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

 

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

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

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

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

然后用混入像往常一样在顶部，当你想设置的顺序，把它写成：

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