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

Question

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

使用LESS在每次加载页面时呈现CSS。

在构建过程中使用LESS，并仅在生产中使用渲染的CSS。

我想知道是否有时候您会使用一个而不是另一个。一方面，您有一个动态CSS，一个运行时环境，另一个是从(希望)简洁明了的LESS模板构建的静态CSS。

Answer 1

This是Chris Coyier在CSS-Tricks上撰写的文章

克里斯说，可以像使用普通.less文件一样，通过LESS使用link标记来使用.css文件

<link href="style.less">

尽管这是处理文件的一种方法，但它并不是最有效的处理方法。这可能会严重降低加载速度，并可能导致浏览器崩溃。最好使用LESS gem将LESS转换为CSS。正如克里斯所说，

The "pre" part of preprocessing you can think of as "before you send these files to the live website."

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

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

Rather than the Sass/LESS code being compiled once, it’s compiled on every single page request — and to make matters worse, you’re passing that burden off on your users, rather than doing it yourself

对于第二点，本质上就是构建CSS预处理程序的目的。它们具有易于管理的CSS脚本，具有较高的可读性和较低的更改难度。然后，您甚至不必查看CSS文件。只需将其运送到浏览器领域，无论如何它都会被浏览器特定的渲染(咳嗽，IE咳嗽)撕裂。