意見徵集：一級 Calc

Sass 最受歡迎的功能之一，就是能夠更輕鬆地使用 calc() 表達式。從過去以來，這些表達式都被解析為不透明的字串：在括號之間，您可以放入任何文字，Sass 只會將其視為未加引號的字串。這簡化了 Sass 的解析器，因為我們不必支援特定的 calc() 微型語法，而且這意味著我們自動支援新功能，例如在 calc() 中使用 CSS 變數。

然而，這也帶來了相當大的使用性成本。因為每個 calc() 對 Sass 的解析器來說都是完全不透明的，所以使用者不能簡單地使用 Sass 變數來代替值；他們必須明確地插入變數。而且一旦創建了 calc() 表達式，就無法像操作一般數字一樣使用 Sass 來操作 它。

我們希望透過一個稱為「一級 Calc」的新提案來改變這種情況。這個提案將 calc()（和其他支援的數學函數）從解析為未加引號的字串改為深入解析，並且有時（儘管並非總是）產生一種稱為「計算」的新資料類型。這種資料類型表示無法在編譯時解析的數學表達式，例如 calc(10% + 5px)，並允許這些表達式在其他數學函數中優雅地組合 使用。

更具體地說：calc() 表達式將根據 CSS 語法 進行解析，並額外支援 Sass 變數、函數和（為了向後相容）插入。Sass 會在編譯時盡可能多地執行數學運算，如果結果是單一數字，它會將其作為普通的 Sass 數字類型返回。否則，它將返回一個表示可以在瀏覽器中解析的（簡化）表達式的 計算。

例如：

• calc(1px + 10px) 將返回數字 11px。

• 同樣地，如果 $length 是 10px，則 calc(1px + $length) 將返回 11px。

• 但是，calc(1px + 10%) 將返回計算 calc(1px + 10%)。

• 如果 $length 是 calc(1px + 10%)，則 calc(1px + $length) 將返回 calc(2px + 10%)。

• Sass 函數可以直接在 calc() 中使用，因此 calc(1% + math.round(15.3px)) 返回 calc(1% + 15px)。

請注意，計算通常不能用於代替數字。例如，1px + calc(1px + 10%) 將產生錯誤，math.round(calc(1px + 10%)) 也會產生錯誤。這是因為計算不能與數字互換使用（您不能將計算傳遞給 math.sqrt()），因此我們希望透過將所有數學運算都包裝在 calc() 中，或使用普通的 Sass 算術，來確保數學函數明確地說明它們是否支援 計算。

為了向後相容，包含插入的 calc() 表達式將繼續使用舊的高度允許語法進行解析，儘管此行為最終將被棄用並移除。這些表達式仍將返回計算值，但它們永遠不會被簡化或解析為一般 數字。

讓我們知道您的想法！讓我們知道您的想法！永久連結

如果您有興趣進一步了解此提案，請在 GitHub 上閱讀全文。它將在接下來的一個月內開放評論和修訂，因此如果您希望看到一些更改，請提交 issue，我們可以討論 它！