引用 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);
}