使用LESS CSS合并calc（）

Question

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

因为嵌套的@var1: ~"calc(5rem / 10px)"; @var2: ~"calc(50px + "@var1~")"; 表达式基本上没有实际用途（它们是使用预处理器变量的副作用），我想知道是否可以使用LESS将它们合并为单个表达式。

例如，我想要这个：

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

编译成：

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

而不是：

{{1}}

Answer 1

你有可能将第一个var分成两个吗？例如：

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

其中：

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

Answer 2

我发现了一种使用LESS replace()函数的“肮脏技巧”：

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

请注意，如果子calc()表达式包含其他变量，则仅在插值时才有效：

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