引用 CSS 函数中的变量

默认情况下，除非另有说明，否则 LESS 将使用自己的 calc()。所以：

@column-count: 2;

.class-example {
    width: calc(100% / @column-count);
}

会编译到这个：

.class-example {
    width: 50%;
}

虽然它是我们想要的宽度，但 LESS 已经使用它自己的 calc() 函数来计算 width。calc() 函数永远不会成为我们的 CSS。如果你不想使用它的 calc() 函数，你需要像这样转义你的值：

width: calc(~"100% - @{column-count}");

在这里，我们使用~将我们的值前置，并用引号将它们包装起来。也可以引用变量，但必须在 { } 括号中包含变量名称。这允许你使用 CSS calc() 函数进行更复杂的计算，如下所示：

@column-count: 2;
@column-margin: 24px;

.class-example {
    width: calc("~(100% / @{column-count}) - @{column-margin}");
}

这编译为：

.class-example {
    width: calc((100/2) - 24px);
}