CSS和SASS精度的故事

百分比佈局的挑戰：瀏覽器差異和浮點精度問題

百分比佈局因瀏覽器不一致性和浮點精度缺乏規範而極具挑戰性，這可能導致渲染對齊和精度問題。

Sass 的優勢：提升精度和代碼可讀性

Sass 作為一種預處理器腳本語言，可以通過處理複雜的計算來提高精度，並使樣式表更易於閱讀和更新。然而，Sass 的默認精度選項為 5，對於某些情況來說可能仍然太低。

calc() 函數：瀏覽器計算和舍入

calc(..) CSS 函數允許瀏覽器處理計算和舍入，可能產生更好的結果。此函數與 Sass 運算相結合，可以為 CSS 精度提供兩全其美的方案。

在 Edenspiekermann，我們依賴代碼審查來確保我們提交的工作足夠好™。我經常遇到的一件事是圍繞數字（尤其是帶有小數點的數字）的模糊性。因此，這是一篇簡短的文章，旨在闡明這個問題。

初始設置

為了在開始之前使整個解釋更清晰，我們將處理一小段代碼，這與我們的案例非常相關。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

問題是什麼？

您可能想知道這段代碼有什麼問題。從外觀上看，問題不大。這是一個三列網格佈局，相當常見。

但是，33% 33% 33% 等於 99%，而不是 100%。雖然在大多數情況下這可能沒有任何區別，但在處理直線對齊時——1% 會產生很大影響。 1400 像素寬的容器的 1% 是 14 像素。這是一個相當大的距離。

為什麼我們不能只移動小數點（或者添加它）以使其更精確呢？我們可能會將間隙減少到 1.4 像素，甚至 0.14 像素，我想這已經不值得費心了！那就從這裡開始吧。

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

效果更好，但仍然不完美。 John Albin Wilkins 在題為“響應式設計的骯髒小秘密”的這篇文章中對這個問題進行了廣泛的討論。如果您還沒有閱讀它，請閱讀它。

瀏覽器不能處理這個問題嗎？

此時，您可能想知道為什麼瀏覽器不能讓它工作™。問題是，CSS 規範沒有（具有諷刺意味的是）向瀏覽器廠商指定在百分比數字的浮點精度情況下該怎麼做。當 CSS 規範省略細節時，您可以確定每個瀏覽器都會以自己的方式處理它。

以下來自上述文章的示例：

[…] 使用 6 列網格，每列寬度為 100% ÷ 6 = 16.666667%。在 1000 像素寬的視口中（我方便地選擇它以使我們的數學更容易），每列計算為 166.66667 像素。由於規範沒有給出指導方針，瀏覽器廠商可以自由制定自己的規則。如果瀏覽器四捨五入到最接近的像素，在我們的示例中，我們將得到 167 像素。但由於 167 x 6 = 1002 像素，我們不再有空間在我們的視口中容納所有 6 列。或者，如果瀏覽器向下舍入到每列 166 像素，我們將比完美地將所有列放入我們的視口中少 4 像素。 ——John Albin Wilkins

這就是發生的事情。舊版本的 Internet Explorer（主要是 6 和 7）四捨五入到最接近的整數，導致佈局中斷。 WebKit 瀏覽器向下舍入，這可以防止任何災難性的佈局結果，但會給我們留下額外的空間。 Opera（至少在其舊的渲染引擎中）做了一些我什至懶得解釋的奇怪事情。但是，規範中沒有關於此行為的規則，那麼該怪誰呢？當然不是那些採用子像素渲染的瀏覽器，因為最終這是產生最佳結果的方法。

無論如何，這簡直是一團糟，我們將在本文的結論中再次討論這個問題。

Sass 怎麼樣？

Sass 支持數學運算。這並不是什麼新鮮事，實際上是 Sass 最初使用的幾件事之一（用於構建基於數學的網格系統）。我們可以告訴 Sass 我們想要將容器的寬度分成 3 個相等的部分。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

我們也可以使用 percentage(..) 函數獲得相同的結果：

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

在 Ruby 和 LibSass 中，Sass 的精度選項為 5。這實際上是一個問題，因為它非常低；10 會更好，但這並不是默認值（儘管可以配置，但不是很容易）。

此代碼將生成以下 CSS：

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

這並沒有解決我們的瀏覽器問題，但這確實使編寫樣式表更容易。我們不僅不必自己處理計算和精度，而且我們還通過實際顯示計算使代碼更易於閱讀和更新。

我認為這是一件好事。

兩全其美

到目前為止，我們已經了解到，最好讓 Sass 為我們處理計算，而不是硬編碼值。現在，最好的方法是讓瀏覽器以它能做到的最佳方式來處理這個問題。為此，可以使用 calc(..) CSS 函數。

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

這段代碼不會編譯成任何東西。它以作者編寫的形式出現在瀏覽器中。然後，瀏覽器負責充分利用它。我會完全誠實地告訴你，我不確定瀏覽器是否像處理常規值一樣處理 calc(..) 值。我認為它們會執行計算，然後進行舍入。有些瀏覽器似乎將子像素渲染納入了等式。如果您對此有任何見解，請在評論中分享。

對於不支持 calc(..) 表達式的瀏覽器（主要是 Internet Explorer 8 和 Opera Mini），我們可以在它之前放置一個表示為 Sass 運算的靜態值。這樣，我們就能兩全其美。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

結論

讓我們快速回顧一下。首先，由於瀏覽器不一致性和浮點精度缺乏規範，百分比佈局很難處理。

然後，硬編碼由某種複雜計算產生的值通常不是一個好主意。我們可以讓 Sass 計算一個近似值（小數點後 5 位）。

更好的是，我們可以讓瀏覽器計算一個近似值。在一個理想的世界中，當瀏覽器負責數學和渲染時，它應該能夠充分利用它。為了朝著這個方向前進，我們依賴 calc(..) 函數。

這幾乎就是目前的情況。沒有什麼新東西，但我認為快速回顧一下會有所幫助！

關於 CSS 和 Sass 精度的常見問題解答 (FAQ)

CSS 和 Sass 有什麼區別？

CSS（層疊樣式表）是一種樣式表語言，用於描述用 HTML 編寫的文檔的外觀和格式。 Sass（語法上令人驚嘆的樣式表）是一種預處理器腳本語言，它被解釋或編譯成 CSS。兩者之間的關鍵區別在於 Sass 具有 CSS 中不存在的功能，例如變量、嵌套、mixin、繼承等。這些功能使 Sass 比 CSS 更強大、更靈活。

CSS 和 Sass 中的精度是如何工作的？

CSS 和 Sass 中的精度是指樣式渲染的細節和準確程度。在 CSS 中，由於缺乏變量和函數，精度通常受到限制。另一方面，Sass 憑藉其高級功能，允許更高的精度。例如，您可以為特定顏色或大小定義變量，並在整個樣式表中一致地使用它們，確保設計中的精度和一致性。

我可以在任何 Web 項目中使用 Sass 嗎？

是的，您可以在任何 Web 項目中使用 Sass。 Sass 與所有版本的 CSS 兼容。因此，您可以從 CSS 開始，然後根據需要添加 Sass 功能。但是，請記住，Sass 需要一個預處理器才能將其轉換為瀏覽器可以解釋的 CSS。

使用 Sass 比 CSS 的好處是什麼？

Sass 比 CSS 提供了幾個好處。它允許使用變量、嵌套、mixin 和繼承，這可以使您的樣式表更井然有序、可重用且易於維護。 Sass 還支持數學運算，允許您直接在樣式表中計算尺寸和顏色。

如何提高 CSS 或 Sass 代碼的精度？

可以通過使用變量來獲得一致的值，使用數學運算進行精確計算，以及使用函數和 mixin 來獲得可重用的樣式來提高 CSS 或 Sass 代碼的精度。此外，使用 CSS 重置可以幫助確保不同瀏覽器之間的一致性。

什麼是 CSS 預處理器，為什麼 Sass 需要它？

CSS 預處理器是一種腳本語言，它擴展了 CSS 的默認功能。它允許您在樣式表中使用變量、嵌套規則、mixin、函數和數學運算。 Sass 是一種 CSS 預處理器。它之所以必要，是因為瀏覽器只能解釋 CSS。因此，Sass 代碼需要在用於 Web 項目之前編譯成 CSS。

Sass 如何幫助編寫 DRY（不要重複自己）代碼？

Sass 支持變量、mixin 和繼承等功能，這有助於編寫 DRY 代碼。變量允許您一次定義一個值並在多個地方使用它。 Mixin 允許您編寫可重用的樣式，這些樣式可以包含在其他規則中。繼承允許您從一個選擇器共享一組 CSS 屬性到另一個選擇器。

使用 Sass 的潛在陷阱是什麼？

雖然 Sass 提供了許多優點，但它也存在潛在的陷阱。對預處理器的需求可能會增加開發過程的複雜性。此外，如果使用不當，一些 Sass 功能（如嵌套和 mixin）可能會導致 CSS 輸出膨脹和效率低下。

如何開始學習和使用 Sass？

網上有很多資源可以學習 Sass。官方 Sass 網站提供了一個全面的入門指南。您還可以在 Web 開發網站和在線學習平台上找到教程。要開始使用 Sass，您需要在開發環境中設置一個 Sass 預處理器。

我可以將現有的 CSS 代碼轉換為 Sass 嗎？

是的，您可以將現有的 CSS 代碼轉換為 Sass。由於 Sass 是 CSS 的超集，因此任何有效的 CSS 都是有效的 Sass。您可以首先將您的 .css 文件重命名為 .scss（Sassy CSS），然後逐漸開始在代碼中使用 Sass 功能。

以上是CSS和SASS精度的故事的詳細內容。更多資訊請關注PHP中文網其他相關文章！