合并calc（）与LESS CSS

Question

我有一个LESS变量，其中包含CSS calc()表达式，并希望在另一个calc()表达式中使用此变量。 CSS规范允许嵌套calc()表达式，但并非所有的浏览器都支持这种（IE/Edge）。

因为嵌套calc()表达式本质上没有实际用途（它们是使用预处理器变量的副作用），所以我想知道是否可以使用LESS将它们合并到单个表达式中。

例如，我想这一点：

@var1: ~"calc(5rem/10px)"; 
@var2: ~"calc(50px + "@var1~")"; 

编译成：

calc(50px + (5rem/10px)) 

取而代之的是：

calc(50px + calc(5rem/10px)) 

Answer 1

，我发现了一种 “肮脏伎俩” 使用LESS replace()功能：

@var2: ~"calc(50px + "replace(@var1, "calc", "")~")"; 

注意，如果孩子calc()表达式包含其他变量，当他们被内只能：

@var1: 5rem; 
@var2: ~"calc(@{var1}/10px)"; 
@var3: ~"calc(50px + "replace(@var2, "calc", "")~")"; 

Answer 2

你能第一个潜在的VAR分成两个？例如：

@var1a: 5rem/10px; 
@var1: calc(@var1a); 

其中：

• @var2a: ~"calc(50px + "@var1~")";生产calc(50px + calc(0.5rem))
• @var2b: ~"calc(50px + @{var1a})";产生calc(50px + 0.5rem)