使用 LESS 和 SASS 的性能答案

【问题标题】：Performance of using LESS and SASS使用 LESS 和 SASS 的性能
【发布时间】：2013-10-08 14:07:55
【问题描述】：

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

【问题讨论】：

【解决方案1】：

我同意@JTolley：SASS/LESS 相对于 CSS 的最大优势在于提高了开发人员的性能。你可以用更少的代码做更多的事情，并保持你的项目结构和良好的格式。

@import

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

减少页面中 HTTP 请求的数量是开始。

与普通 CSS 中的声明相比，SASS / LESS 中的样式声明不会有所不同：它们都是 CSS。但话又说回来，我发现使用框架来工作和结构化要容易得多。变量、嵌套、mixins 和选择器继承帮助我更好地编码并最终获得更小的文件大小。

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

从纯 CSS 到 SCSS 的转换很容易。 CSS 是有效的 SCSS，SCSS 会输出 CSS。
那就试试吧。

【讨论】：

【解决方案2】：

LESS 和 SASS 都使 CSS 更易于编写和管理，因为它们具有强大的功能，例如函数、变量和 mixin，但由于它们在部署之前编译为 CSS，它们丝毫不会影响性能。您的表现完全基于可以很好地缩小的 CSS 输出。

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

【讨论】：

可能使用 LESS 客户端的唯一正当理由是能够更改 LESS 变量，因此可以通过less.modifyVars() 方法动态更改网站外观。预编译样式是不可能的。