LESS/SASS CSS 与缩小/优化相反？
我想知道我是否可以说 LESS/SASS CSS“预处理器（我认为它们被称为？）”与缩小等优化相反？我想知道是否会对性能产生任何明显的影响？还是您认为易于开发更重要？
我问这个问题是因为 LESS CSS 生成的东西是这样的
body #div1 #div2 p
body #div1 #div2 p a:link, body #div1 #div2 p a:visited
...
，我认为它真的会让我的 CSS 膨胀很多。正如你所看到的，这种特殊性并不是必需的，而且它使得阅读 CSS 变得困难（至少我在 firebug 中看到的是这样）。
I wonder can I say that LESS/SASS CSS "pre-processors(I think they are called?)" is the opposite from optimizations like minification? I wonder if there will be any noticeable performance impact? or do you think easy of development is more important?
I ask this because what LESS CSS generates is something like
body #div1 #div2 p
body #div1 #div2 p a:link, body #div1 #div2 p a:visited
...
and I think it can really bloat up my CSS quite a bit. as you can see, such specificity is not required and it makes reading CSS hard (at least what I see in firebug).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在 Sass 中，您可以通过了解嵌套 作品。如果您不愿意，则根本不必进行任何嵌套 - 这是您可以控制的。
使用新的 @extend 指令，您实际上可以通过应用 OOCSS 的原则，减少 CSS 中的冗余，从而可以提高性能。这是一篇让您开始使用 @extend。还有一些 OOCSS 资源：
Sass 中 @extend 的巨大优势在于，它不需要应用 OOCSS 中涉及的手动工作，并且使其变得非常轻松且简单。
最后，正如 Andrea 指出的，Sass 有多种缩小 CSS 的选项（请参阅 :压缩样式），所以总的来说，您实际上拥有了一个非常强大的工具包，不仅可以提高开发人员的性能，还可以提高 CSS 的性能。有关此操作的示例，请参阅 Compass 的作者和 Sass 的核心贡献者 Chris Eppstein 如何< a href="http://chriseppstein.github.com/blog/2010/05/25/refactor-my-stylesheets-digg-edition/" rel="nofollow noreferrer">重构 Digg 样式表 125 行代码减少到 85 行代码（减少了 32%）。
In Sass you can control 'specificity bloat' by understanding how nesting works. You don't have to do any nesting at all if you don't want - it's something you can control.
Using the new @extend directive, you can actually reduce redundancy in your CSS by applying the priciples of OOCSS and can thus improve performance. Here's a good article to get you started with @extend. And a few more OOCSS resources:
The great advantage of @extend in Sass is that it takes the manual effort involved in applying OOCSS and makes it wonderfully painless and easy.
Finally, as Andrea pointed out, Sass has a variety of options for minifying CSS (see the :compressed style), so overall you've actually got a pretty potent toolkit for not only improving your performance as a developer, but also improving the performance of your CSS. For an example of this in action, see how Chris Eppstein, author of Compass and core contributor of Sass, refactors the Digg stylesheet down from 125 lines of code to 85 lines of code (a 32% reduction).
您可能会感到惊讶，但具有重复代码块的 gzip 压缩 CSS 文件不应该比具有较短选择器的 CSS 文件大太多。
这要归功于压缩算法处理文件中重复字符串的方式。它不会两次包含相同的字符串，而是将第二次出现的字符串替换为对第一个字符串的引用，因此该字符串仅在压缩文件中出现一次。看一下生成的 CSS 文件中选择器的重复程度 - 这应该会使它们压缩得相当好。
当然，关键是确保您的 CSS 文件经过 gzip 压缩——不压缩它们肯定会增加文件大小。
You'd be surprised, but gzipped CSS files that have repeated blocks of code shouldn't be too much larger than ones with the shorter selectors.
This is thanks to how the compression algorithm handles duplicate strings in a file. Instead of including the same string twice, it replaces the second occurrence with a reference to the first one, and so that string only appears in the compressed file once. Take a look at how repetitive the selectors in your generated CSS file are - this should make them compress fairly well.
Naturally, the key to this is making sure your CSS files are gzipped - leaving them uncompressed will definitely increase the file size.
根据选项，SASS可以提供不同样式的输出。对于生产，您需要将输出样式设置为“紧凑”。
Depending on the options, SASS can give output in different styles. For production, you will want to set the output style to 'compact'.
有一个 sass 的 firebug 插件，可以让事情更容易阅读。无论如何，您实际上并不需要直接读取输出。
Sass、less 和 xCSS 会生成更多输出，但我不会称之为膨胀。
由于开发人员在代码的生命周期中将名称空间堆叠在其他名称空间之上，手写的 CSS 存在许多冗余和重复，因此性能会迅速下降。维护、设计或编写不善的软件的症状之一就是膨胀。而且由于 CSS 从一开始就存在一些设计缺陷，即使是最好的 CSS 编码人员也会受到此限制的影响。
因此，您必须权衡格式良好的 sass/less 文件的初始占用空间与已编辑多次的手写 CSS 文件的大小。
sass 的另一个好处是你的 HTML 变得更精简。您不需要在整个代码中附加类名来弥补 CSS 的扁平全局结构。
There is a firebug addon for sass that should make things easier to read. You don't really need to read the output directly anyway.
Sass, less and xCSS will generate more output but I wouldn't call it bloat.
Hand written CSS, with it's many redundancies and duplications will degrade quickly as developers pile name spaces on top of others during the life cycle of the code. One of the symptoms of poorly maintained, designed or written software is bloat. And because CSS has some design deficiencies from the start, even the best CSS coders are effected by this limitation.
So you got to weigh up the initial footprint of your well formatted sass/less file against a hand written CSS file that has been edited a few times over.
Another benefit on sass is that your HTML becomes leaner. You don't need to append class names throughout your code to make up for the flat, global structure of CSS.