从 CSS 逆向工程 LESS

Question

如何在 Bootstrap LESS 文件中追溯（“逆向工程”）CSS？

我在 Joomla 3.4.x 中使用自己的 Twitter Bootstrap (3.x) 模板创建了一个网站。 Bootstrap 附带了很多 LESS 文件，我使用 Crunch 从中“编译”我的 bootstrap.min.css 文件。 Bootstrap 中有 40 多个 LESS 文件和近 30 个 mixin LESS 文件，它们都“编译”为 bootstrap.min.css

我对 LESS 文件进行了一些更改，以根据自己的喜好设置网站样式。除此之外，我还制作了一个 custom.less 文件，并将其合并到 bootstrap.less 文件中：@import custom.less。

将 CSS 文件上传到我的网站后，我会访问该网站并使用 Firebug 处理 CSS。我进行了更改，当我喜欢这些更改时，我想在我的 Bootstrap LESS 文件中应用更改，但我发现很难追溯 CSS 的来源。

示例：在 Firebug 中，我为下拉菜单找到了这个：

.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 1.7;
padding: 3px 20px;
white-space: nowrap;
}

经过长时间的搜索，我在 dropdowns.less 中发现了这个：

.dropdown-menu {
...
   // Links within the dropdown menu
  > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: @line-height-base;
    color: @dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
  }
  }

当然，我可以将我的 custom.less 称为 bootstrap.less 文件中的最后一个文件，并在其中写入所有样式覆盖，但在我看来，我会创建很多多余的代码，最终会使网站速度较慢。

有没有一种简单的方法可以在我的 LESS 文件中找到负责我要更改的 CSS 的 LESS 代码？还是有更好的“编译器”让我在 LESS 文件中追溯 CSS？

感谢

汤姆， 汤姆斯特丹网页设计

Answer 1

Firefox DevTools 和 Chrome DevTools 允许display and edit the original LESS files using source maps。

但请注意，Firebug 不提供此功能。