CSS预处理器 - 为每个页面加载构建CSS还是仅为构建过程构建CSS？

Question

进入CSS预处理器的有趣世界。假设我们使用LESS来渲染我们的CSS。我想知道两种不同的方法：

  
• 使用LESS在每个页面加载时呈现CSS。
  
• 将LESS用作构建过程的一部分，并在生产中使用渲染的CSS。

我想知道是否有时候你会使用一个而不是另一个。一方面，你有一个动态CSS运行时，另一个静态CSS构建来自（希望）简洁明了的LESS模板。

Answer 1

This是一篇关于Chris Coyier的CSS-Tricks的文章

Chris说，与LESS一样，使用.less标签可以使用link文件，就像使用普通.css文件一样

<link href="style.less">

虽然这是处理文件的一种方法，但它并不是最有效的方法。它可能会严重减慢加载情况，并且可能会使浏览器崩溃。最好使用LESS gem将LESS转换为CSS。正如克里斯所说，

  

预处理的“前”部分，您可以将其视为“在将这些文件发送到实时网站之前”。

Here是一篇很好的文章，解释了处理.less文件的不同方法。

在客户端编译中，作者很好地总结了

  

而不是Sass / LESS代码被编译一次，它是在每个页面请求上编译的 - 更糟糕的是，你将这个负担转嫁给用户，而不是自己做（

对于您的第二点，这基本上是为CSS预处理器构建的。他们被制作成具有可管理的CSS脚本，具有高可读性和低变化难度。然后，您甚至不必查看CSS文件。只需将它发送到浏览器的土地，无论如何它将被浏览器特定的渲染（咳嗽，咳嗽IE）撕裂。