5

我想知道 LESS/SASS CSS“预处理器（我认为它们被称为？）”与缩小等优化相反吗？我想知道是否会有任何明显的性能影响？还是您认为易于开发更重要？

我问这个是因为 LESS CSS 生成的类似于

body #div1 #div2 p
body #div1 #div2 p a:link, body #div1 #div2 p a:visited
...

而且我认为它确实会使我的 CSS 膨胀不少。正如你所看到的，这种特殊性不是必需的，它使阅读 CSS 变得困难（至少我在 firebug 中看到的）。

4

4 回答 4

4

在 Sass 中，您可以通过了解嵌套的工作原理来控制“特异性膨胀”。如果你不想要，你根本不需要做任何嵌套——这是你可以控制的。

使用新的@extend 指令，您实际上可以通过应用OOCSS的原则来减少CSS 中的冗余，从而提高性能。这是一篇很好的文章，可以帮助您开始使用 @extend。还有一些 OOCSS 资源：

在 Sass 中 @extend 的巨大优势在于它需要手动操作 OOCSS 并使其非常轻松和容易。

最后，正如 Andrea 指出的那样，Sass 有多种缩小 CSS 的选项（请参阅:compressed style），因此总体而言，您实际上拥有一个非常强大的工具包，不仅可以提高您作为开发人员的性能，还可以提高性能你的 CSS。有关此操作的示例，请参阅Compass的作者和 Sass 的核心贡献者Chris Eppstein 如何将 Digg 样式表从 125 行代码重构为 85 行代码（减少 32%）。

于 2010-08-20T11:08:37.773 回答
2

您会感到惊讶，但是具有重复代码块的 gzip 压缩 CSS 文件不应比具有较短选择器的文件大太多。

这要归功于压缩算法如何处理文件中的重复字符串。它不是两次包含相同的字符串，而是将第二次出现替换为对第一次的引用，因此该字符串仅在压缩文件中出现一次。看看生成的 CSS 文件中选择器的重复性如何——这应该使它们压缩得相当好。

当然，这样做的关键是确保您的 CSS 文件是 gzip 压缩的——不压缩它们肯定会增加文件大小。

于 2010-08-20T00:24:04.220 回答
1

根据options，SASS 可以提供不同样式的输出。对于生产，您需要将输出样式设置为“紧凑”。

于 2010-08-20T00:25:59.203 回答
0

有一个用于 sass 的 firebug 插件，它应该使事情更容易阅读。无论如何，您实际上并不需要直接读取输出。

Sass、less 和 xCSS 会产生更多的输出，但我不会称之为臃肿。

由于开发人员在代码的生命周期中将名称空间堆积在其他名称空间之上，手写的 CSS 具有许多冗余和重复，这将迅速退化。软件维护、设计或编写不善的症状之一是臃肿。而且由于 CSS 从一开始就存在一些设计缺陷，即使是最好的 CSS 编码器也会受到这种限制的影响。

因此，您必须权衡格式良好的 sass/less 文件与经过多次编辑的手写 CSS 文件的初始占用空间。

sass 的另一个好处是您的 HTML 变得更精简。您不需要在整个代码中附加类名来弥补 CSS 的扁平、全局结构。

于 2010-12-13T03:03:12.200 回答