百分比布局的挑战：浏览器差异和浮点精度问题
百分比布局因浏览器不一致性和浮点精度缺乏规范而极具挑战性，这可能导致渲染对齐和精度问题。
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（层叠样式表）是一种样式表语言，用于描述用 HTML 编写的文档的外观和格式。Sass（语法上令人惊叹的样式表）是一种预处理器脚本语言，它被解释或编译成 CSS。两者之间的关键区别在于 Sass 具有 CSS 中不存在的功能，例如变量、嵌套、mixin、继承等。这些功能使 Sass 比 CSS 更强大、更灵活。
CSS 和 Sass 中的精度是指样式渲染的细节和准确程度。在 CSS 中，由于缺乏变量和函数，精度通常受到限制。另一方面，Sass 凭借其高级功能，允许更高的精度。例如，您可以为特定颜色或大小定义变量，并在整个样式表中一致地使用它们，确保设计中的精度和一致性。
是的，您可以在任何 Web 项目中使用 Sass。Sass 与所有版本的 CSS 兼容。因此，您可以从 CSS 开始，然后根据需要添加 Sass 功能。但是，请记住，Sass 需要一个预处理器才能将其转换为浏览器可以解释的 CSS。
Sass 比 CSS 提供了几个好处。它允许使用变量、嵌套、mixin 和继承，这可以使您的样式表更井然有序、可重用且易于维护。Sass 还支持数学运算，允许您直接在样式表中计算尺寸和颜色。
可以通过使用变量来获得一致的值，使用数学运算进行精确计算，以及使用函数和 mixin 来获得可重用的样式来提高 CSS 或 Sass 代码的精度。此外，使用 CSS 重置可以帮助确保不同浏览器之间的一致性。
CSS 预处理器是一种脚本语言，它扩展了 CSS 的默认功能。它允许您在样式表中使用变量、嵌套规则、mixin、函数和数学运算。Sass 是一种 CSS 预处理器。它之所以必要，是因为浏览器只能解释 CSS。因此，Sass 代码需要在用于 Web 项目之前编译成 CSS。
Sass 支持变量、mixin 和继承等功能，这有助于编写 DRY 代码。变量允许您一次定义一个值并在多个地方使用它。Mixin 允许您编写可重用的样式，这些样式可以包含在其他规则中。继承允许您从一个选择器共享一组 CSS 属性到另一个选择器。
虽然 Sass 提供了许多优点，但它也存在潜在的陷阱。对预处理器的需求可能会增加开发过程的复杂性。此外，如果使用不当，一些 Sass 功能（如嵌套和 mixin）可能会导致 CSS 输出膨胀和效率低下。
网上有很多资源可以学习 Sass。官方 Sass 网站提供了一个全面的入门指南。您还可以在 Web 开发网站和在线学习平台上找到教程。要开始使用 Sass，您需要在开发环境中设置一个 Sass 预处理器。
是的，您可以将现有的 CSS 代码转换为 Sass。由于 Sass 是 CSS 的超集，因此任何有效的 CSS 都是有效的 Sass。您可以首先将您的 .css 文件重命名为 .scss（Sassy CSS），然后逐渐开始在代码中使用 Sass 功能。
以上是CSS和SASS精度的故事的详细内容。更多信息请关注PHP中文网其他相关文章！
