javascript - Squarespace 模板和 Less CSS

Question

我一直在研究一些 Squarespace 模板设计资源，以更好地理解现有模板。这让我开始关注 Less，但我不确定我是否看到了它适合的位置。文档提到了 Node .js 和编译 Less，看起来它基本上是 JavaScript，就像 CSS 中的东西。

我不确定我是否看到 Less 添加的内容无法使用某种形式的 JavaScript 完成，因为它似乎无论如何都需要 JavaScript。不确定我是否只是错过了 Less 的要点，或者它做了一些我没有看到的无法在 JavaScript 中完成的事情。

Answer 1

Less 所做的一切都可以用 Javascript 完成，但在每个实例中使用它来操作样式表是不切实际的。

在 Less 中，是这样的:

@link-color: #428bca;

a {
    color: @link-color;
}

在纯 JS 中看起来像这样:

const linkColor = '#428bca';
document.getElementsByTagName('a').forEach(link => {
    link.style.color = linkColor;
});

你给浏览器更多的工作来解释 Javascript 和设置样式，而不是为它提供 Less 输出的生成的 CSS 文件。

这也是一种关注点分离。通常，您将使用 HTML 进行布局，使用 CSS 进行样式设计，使用 Javascript 进行交互，并在 CSS 可能不够用的情况下挑选部分内容。

为了获得最佳性能，您将根据需要按此顺序使用它们。

必须首先将 Less 转换为 CSS，以便浏览器可以解释它，并且不需要 Javascript 即可工作。看到在 Squarespace 的模板中包含一个 Less 文件应该会自动转换，您不会给每个用户额外的页面绘图样式开销，从而加快网站速度。