LESS/SASS CSS与缩小/优化相反的作用是什么？

Question

我想知道，能不能说LESS/SASS CSS“预处理器（我想这就是它们被称呼的？）”与像压缩一样的优化相反？我想知道是否会有任何明显的性能影响？或者你认为开发的易用性更重要？

我问这个问题是因为LESS CSS生成的东西是这样的：

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

我认为这会让我的CSS变得非常臃肿。正如你所看到的，这种特定性并不是必需的，它使得阅读CSS变得困难（至少在firebug中我看到了这样的情况）。

- Jiew Meng

---

“或者你认为开发的简易性更重要？”告诉我，哪个更重要：机器解析CSS需要5毫秒（至少在现代浏览器中是准确的），考虑到CPU时间如此便宜几乎是免费的，还是开发人员多花十分钟的人类时间？ - Camilo Martin

Answer 1

在Sass中，您可以通过了解嵌套的工作方式来控制“特异性膨胀”。如果您不想进行任何嵌套-这是您可以控制的。使用新的@extend指令，您实际上可以通过应用OOCSS的原则来减少 CSS 中的冗余，并且因此可以提高性能。这里有一篇好文章帮助您开始使用@extend。还有一些OOCSS资源：

• http://www.stubbornella.org/content/category/general/geek/css/oocss-css-geek-general/
• http://wiki.github.com/stubbornella/oocss/faq
• http://oocss.org/

在Sass中使用@extend的最大优势是它消除了应用OOCSS时需要手动操作的繁琐过程，使得这一过程变得非常轻松和简单。

最后，正如Andrea所指出的那样，Sass有多种选项可以压缩CSS（请参见:压缩样式），因此您实际上拥有一个相当强大的工具包，不仅可以提高开发人员的性能，还可以提高CSS的性能。例如，Chris Eppstein（Compass的作者和Sass的核心贡献者）展示了如何将Digg样式表的代码行数从125行减少到85行（减少32%）。（请点击此处） （请点击此处）

- Charles Roper

Answer 2

您会感到惊讶，但是具有重复代码块的gzipped CSS文件与具有较短选择器的文件大小不应该相差太大。

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

当然，关键在于确保您的CSS文件已经进行了gzip压缩 - 如果未压缩，则文件大小肯定会增加。

- derekerdmann

Answer 3

根据选项，SASS可以以不同的样式输出。对于生产环境，您需要将输出样式设置为“紧凑型”。

- Andrea

Answer 4

有一个针对Sass的firebug插件，应该会让事情变得更加易读。无论如何，您实际上并不需要直接阅读输出。

Sass、less和xCSS将生成更多的输出，但我不会称其为膨胀。

手写CSS，由于其许多冗余和重复，在代码生命周期中堆叠命名空间时会快速退化。设计不良、设计或编写软件的一种症状是膨胀。由于CSS从一开始就存在一些设计缺陷，即使是最好的CSS编码人员也受到这种限制的影响。

因此，您必须权衡格式良好的Sass/less文件的初始占用空间与已编辑几次的手写CSS文件之间的差异。

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

- Rimian