如何使用符號作爲更少的變量？

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