使用LESS和SASS的表现

Question

我使用Yahoo的最佳实践来加速我的网站（http://developer.yahoo.com/performance/rules.html），但LESS和SASS CSS框架如何影响性能？它们比直接缩小的CSS文件更慢还是更快？

Answer 1

由于函数，变量和混合等强大的功能，LESS和SASS都使CSS更易于编写和管理，但由于它们在部署之前编译为CSS，因此不会影响性能。您的性能完全基于CSS输出，可以很好地缩小。

你可以使用像less.js这样的javascript解释器在客户端运行LESS，但我还没有看到这样做的充分理由。由于javascript库的要求，它既慢又明显，而且几乎肯定更大。

Answer 2

我同意@JTolley：SASS / LESS相对于CSS的最大优势是开发人员的性能提升。您可以使用更少的代码完成更多工作，并保持项目的结构化和格式化。

@import

如果将样式表拆分为多个文档，则SASS / LESS预处理器会将代码编译为单个CSS文件。普通CSS中的import语句将导致多个请求。雅虎最佳实践：

  

减少页面中的HTTP请求数量   启动。

文件大小

SASS / LESS中的样式声明与普通CSS中的声明相比没有什么区别：它们都是CSS。但话说回来，我觉得使用框架工作得很好很容易。变量，嵌套，mixins和选择器继承可以帮助我更好地编写代码并最终获得更小的文件大小。

注意：嵌套很多会创建长选择器。长选择器需要更多的渲染时间。

从简单的CSS转移到SCSS并返回很容易。 CSS是有效的SCSS，SCSS将输出CSS 所以试一试。