使用 LESS 作为实时 CSS 引擎

最近有很多关于使用 LESS/Sass 作为预处理器来更快更容易地创建更简洁、跨浏览器友好的 CSS 的讨论。根据我个人的经验，我可以告诉你，一旦你开始使用这些语言中的任何一种，你就会玩得非常开心，以至于你不会再想回到普通的 CSS 了。

然而，这些语言的问题在于“预处理器”这个词。

预处理器的概念是，在你编写的代码和你网站上使用的代码之间存在一个“处理”步骤。这有点麻烦。它也阻止我们动态地使用变量或函数，如果你让用户自定义代码的呈现方式（比如在 WordPress 主题中），这可能很有用。

好吧，在生产环境中实时处理 LESS 是完全可能的，以下是如何在我们公司使用它来解决一些重大问题的。

关于 PageLines

PageLines 基于 WordPress 开发了一个“拖放”框架，旨在简化专业网站的构建。

试图保持专业性，同时又易于使用（典型用户不必编写任何代码），这带来了一些工程挑战，而 LESS 帮助解决了这些挑战。

用例

PageLines 框架构建在 WordPress（使用 PHP）之上。在考虑此解决方案时，我们有几个目标。例如，我们希望

• 允许根据框架内的用户选项自定义 CSS
• 更好地组织和分隔 CSS，而不会增加导致性能下降的 HTTP 请求
• 更快更容易地创建更好、更跨浏览器的设计，而无需在我们的工作流程中处理新的“预处理”步骤

为什么选择 LESS 进行实时处理？（而不是 SASS/Compass）

Chris 撰写了一篇关于 Sass 与 LESS 的优缺点 的有趣文章。但是，其中省略了一些想法，这些想法让我们更倾向于使用 LESS 进行实时处理。具体来说，LESS 是用 JavaScript 设计的，JavaScript 是一种开发人员友好的语言，并且最初就是为了实时使用而创建的。最重要的是，它的编译速度比 SASS 快 6 倍。Twitter 的流行框架 Bootstrap 的架构师 Jacob Thornton 对这场辩论有更多见解，请点击此处查看。

虽然最初的 live less.js 方法在生产环境中延迟过大，但在我们谈论在生产环境中使用它而不是作为预处理器时，它仍然有助于为 LESS 敲定交易。我们最终使用了 Less.js 的一个特殊的 PHP 移植版本 来实现我们的目标，稍后会详细介绍。

作为旁注，如果您在 Ruby on Rails 环境中开发，则理论上可以使用 SASS “实时”。我们还没有实际测试过，所以我不确定使用这种方法的性能或瓶颈。

我们是如何实现的

对我们来说，执行实时 LESS 引擎的关键在于 LESS 处理器到 PHP 的此移植版本（链接），它允许我们根据用户在服务器上的操作来解析和缓存 LESS 文件。为了使此功能正常工作，框架只需执行以下操作。

• 获取框架中的所有 LESS 文件并将它们添加到 PHP 变量中
• 使用上述 PHP 脚本将 LESS 解析为 CSS 并将其放入变量中
• 将 CSS 输出到一个文件中，该文件缓存在服务器和访问者的浏览器中
• 每当用户保存其设置或安装新扩展时，都会再次运行此过程

代码示例

这不是我们使用的实际代码，但应该可以让你有一个大致的了解。

$parser = new lessc(); // Start new object from PHP Less script
$less_code = file_get_contents(‘/path/to/whatever.less’); // Grab LESS
$processed_css = $parser->parse($less_code); // Process to CSS
file_put_contents(‘path/to/css-file.css’, $processed_css); // Write CSS
echo “<link rel='stylesheet' href='http://url/to/css-file.css' type='text/css' media='all' />”; // Link CSS in page

结果

控制 - 动态颜色和排版

在框架内实现 LESS 最酷的事情之一是，我们能够根据用户选择动态控制颜色和排版。这使我们能够设计出优秀的设计，同时仍然允许用户自定义颜色和字体。

选项 - 用户的 LESS 选项

用户实际上可以在管理选项面板中添加自己的 LESS。他们可以使用背景颜色或主要字体的常用变量。这是一项用户非常喜欢的功能，他们可以使用它来创建更跨浏览器、更强大的框架自定义。

组织 - 将多个文件合并为一个

使用 LESS 的处理器允许我们按类型组织所有 css/less 文件，然后在运行时将它们组合成单个“compiled-css”文件。这绝对使查找我们想要的内容变得更容易。

优化 - 更简洁、更快、跨浏览器的 CSS

因为我们可以使用嵌套选择器和 mixin，所以我们编写的代码更加简洁。虽然这与使用预处理器时相同，但无需处理查找所有文件和编译，我们可以轻松使用它。