css - 在同一个 HTML 中结合 LESS 和 CSS

Question

我似乎无法在网上的任何地方找到这个问题的答案。

我已经为我的站点编写了所有 CSS 代码，没有时间将其重新格式化为 LESS，但是我刚刚发现 LESS 以及它如何对某些功能有用。例如，我想用 LESS 编辑我的 html 页面上的表单，但我编写的 CSS 其他一切都很好。有没有办法将两者结合起来？如果我加载 2 个单独的文件，是否可以让 CSS 影响 HTML 页面的某些部分而 LESS 影响其他部分？

Answer 1

可以理解，您对 LESS 实际上是什么感到困惑 :) LESS"is"CSS。就其本身而言，它是您使用各种快捷方式、变量和函数编写的文档，然后将其编译(转换为)CSS。

所以当你写 LESS 的时候，你就是在写 CSS，但是用了一堆速记。

有多种方法可以将 LESS 编译成 CSS，包括 winLess和(我的选择)Grunt .我相信还有其他人。我让 Grunt 设置它的方式也在编译的同时最小化(压缩)CSS。它还会在您保存 .less 文件时自动编译。

Less 保存为 .less 文件。一旦它被编译成(好吧......“作为”).css 文件，通常你不应该编辑那个 .css 文件......只需编辑它来自的 .less 文件! (并重新编译):)

这里的要点是 LESS 是一种 CSS 预处理器语言(还有其他语言，尤其是 SASS)。一种最终简单地编写 CSS 的简便而强大的方法。

几点:

1. CSS 实际上是有效的 LESS。你可以简单地将 CSS 文件重命名为 LESS，然后编译它，你最终会得到一个匹配的 CSS 文件。 (然后在 LESS 文件中，您可以开始利用“速记”功能，将所有文件编译成...仍然...相同的 CSS 文件。[@caesay 建议]

2. 您永远不会将 LESS 文件包含到 html 文件中。请记住，LESS 只能被编译成一个 CSS 文件……您确实包含了它。