百分比佈局的挑戰(zhàn)：瀏覽器差異和浮點(diǎn)精度問題

百分比佈局因?yàn)g覽器不一致性和浮點(diǎn)精度缺乏規(guī)範(fàn)而極具挑戰(zhàn)性，這可能導(dǎo)致渲染對(duì)齊和精度問題。

Sass 的優(yōu)勢(shì)：提升精度和代碼可讀性

Sass 作為一種預(yù)處理器腳本語(yǔ)言，可以通過處理複雜的計(jì)算來(lái)提高精度，並使樣式表更易於閱讀和更新。然而，Sass 的默認(rèn)精度選項(xiàng)為 5，對(duì)於某些情況來(lái)說可能仍然太低。

calc() 函數(shù)：瀏覽器計(jì)算和舍入

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

在 Edenspiekermann，我們依賴代碼審查來(lái)確保我們提交的工作足夠好?。我經(jīng)常遇到的一件事是圍繞數(shù)字（尤其是帶有小數(shù)點(diǎn)的數(shù)字）的模糊性。因此，這是一篇簡(jiǎn)短的文章，旨在闡明這個(gè)問題。

初始設(shè)置

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

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

問題是什麼？

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

但是，33% 33% 33% 等於 99%，而不是 100%。雖然在大多數(shù)情況下這可能沒有任何區(qū)別，但在處理直線對(duì)齊時(shí)——1% 會(huì)產(chǎn)生很大影響。 1400 像素寬的容器的 1% 是 14 像素。這是一個(gè)相當(dāng)大的距離。

為什麼我們不能只移動(dòng)小數(shù)點(diǎn)（或者添加它）以使其更精確呢？我們可能會(huì)將間隙減少到 1.4 像素，甚至 0.14 像素，我想這已經(jīng)不值得費(fèi)心了！那就從這裡開始吧。

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

效果更好，但仍然不完美。 John Albin Wilkins 在題為“響應(yīng)式設(shè)計(jì)的骯髒小秘密”的這篇文章中對(duì)這個(gè)問題進(jìn)行了廣泛的討論。如果您還沒有閱讀它，請(qǐng)閱讀它。

瀏覽器不能處理這個(gè)問題嗎？

此時(shí)，您可能想知道為什麼瀏覽器不能讓它工作?。問題是，CSS 規(guī)範(fàn)沒有（具有諷刺意味的是）向?yàn)g覽器廠商指定在百分比數(shù)字的浮點(diǎn)精度情況下該怎麼做。當(dāng) CSS 規(guī)範(fàn)省略細(xì)節(jié)時(shí)，您可以確定每個(gè)瀏覽器都會(huì)以自己的方式處理它。

以下來(lái)自上述文章的示例：

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

這就是發(fā)生的事情。舊版本的 Internet Explorer（主要是 6 和 7）四捨五入到最接近的整數(shù)，導(dǎo)致佈局中斷。 WebKit 瀏覽器向下舍入，這可以防止任何災(zāi)難性的佈局結(jié)果，但會(huì)給我們留下額外的空間。 Opera（至少在其舊的渲染引擎中）做了一些我什至懶得解釋的奇怪事情。但是，規(guī)範(fàn)中沒有關(guān)於此行為的規(guī)則，那麼該怪誰(shuí)呢？當(dāng)然不是那些採(cǎi)用子像素渲染的瀏覽器，因?yàn)樽罱K這是產(chǎn)生最佳結(jié)果的方法。

無(wú)論如何，這簡(jiǎn)直是一團(tuán)糟，我們將在本文的結(jié)論中再次討論這個(gè)問題。

Sass 怎麼樣？

Sass 支持?jǐn)?shù)學(xué)運(yùn)算。這並不是什麼新鮮事，實(shí)際上是 Sass 最初使用的幾件事之一（用於構(gòu)建基於數(shù)學(xué)的網(wǎng)格系統(tǒng)）。我們可以告訴 Sass 我們想要將容器的寬度分成 3 個(gè)相等的部分。

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

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

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

在 Ruby 和 LibSass 中，Sass 的精度選項(xiàng)為 5。這實(shí)際上是一個(gè)問題，因?yàn)樗浅５停?0 會(huì)更好，但這並不是默認(rèn)值（儘管可以配置，但不是很容易）。

此代碼將生成以下 CSS：

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

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

我認(rèn)為這是一件好事。

兩全其美

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

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

這段代碼不會(huì)編譯成任何東西。它以作者編寫的形式出現(xiàn)在瀏覽器中。然後，瀏覽器負(fù)責(zé)充分利用它。我會(huì)完全誠(chéng)實(shí)地告訴你，我不確定瀏覽器是否像處理常規(guī)值一樣處理 calc(..) 值。我認(rèn)為它們會(huì)執(zhí)行計(jì)算，然後進(jìn)行舍入。有些瀏覽器似乎將子像素渲染納入了等式。如果您對(duì)此有任何見解，請(qǐng)?jiān)谠u(píng)論中分享。

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

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

結(jié)論

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

然後，硬編碼由某種複雜計(jì)算產(chǎn)生的值通常不是一個(gè)好主意。我們可以讓 Sass 計(jì)算一個(gè)近似值（小數(shù)點(diǎn)後 5 位）。

更好的是，我們可以讓瀏覽器計(jì)算一個(gè)近似值。在一個(gè)理想的世界中，當(dāng)瀏覽器負(fù)責(zé)數(shù)學(xué)和渲染時(shí)，它應(yīng)該能夠充分利用它。為了朝著這個(gè)方向前進(jìn)，我們依賴 calc(..) 函數(shù)。

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

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

CSS 和 Sass 有什麼區(qū)別？

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

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

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

我可以在任何 Web 項(xiàng)目中使用 Sass 嗎？

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

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

Sass 比 CSS 提供了幾個(gè)好處。它允許使用變量、嵌套、mixin 和繼承，這可以使您的樣式表更井然有序、可重用且易於維護(hù)。 Sass 還支持?jǐn)?shù)學(xué)運(yùn)算，允許您直接在樣式表中計(jì)算尺寸和顏色。

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

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

什麼是 CSS 預(yù)處理器，為什麼 Sass 需要它？

CSS 預(yù)處理器是一種腳本語(yǔ)言，它擴(kuò)展了 CSS 的默認(rèn)功能。它允許您在樣式表中使用變量、嵌套規(guī)則、mixin、函數(shù)和數(shù)學(xué)運(yùn)算。 Sass 是一種 CSS 預(yù)處理器。它之所以必要，是因?yàn)闉g覽器只能解釋 CSS。因此，Sass 代碼需要在用於 Web 項(xiàng)目之前編譯成 CSS。

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

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

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

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

如何開始學(xué)習(xí)和使用 Sass？

網(wǎng)上有很多資源可以學(xué)習(xí) Sass。官方 Sass 網(wǎng)站提供了一個(gè)全面的入門指南。您還可以在 Web 開發(fā)網(wǎng)站和在線學(xué)習(xí)平臺(tái)上找到教程。要開始使用 Sass，您需要在開發(fā)環(huán)境中設(shè)置一個(gè) Sass 預(yù)處理器。

我可以將現(xiàn)有的 CSS 代碼轉(zhuǎn)換為 Sass 嗎？

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

以上是CSS和SASS精度的故事的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！