我一直在研究一些 Squarespace 模板设计资源,以更好地理解现有模板。这让我开始关注 Less,但我不确定我是否看到了它适合的位置。文档提到了 Node .js 和编译 Less,看起来它基本上是 JavaScript,就像 CSS 中的东西。
我不确定我是否看到 Less 添加的内容无法使用某种形式的 JavaScript 完成,因为它似乎无论如何都需要 JavaScript。不确定我是否只是错过了 Less 的要点,或者它做了一些我没有看到的无法在 JavaScript 中完成的事情。
最佳答案
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 文件应该会自动转换,您不会给每个用户额外的页面绘图样式开销,从而加快网站速度。
关于javascript - Squarespace 模板和 Less CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47806185/