从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;
}

经过长时间的搜索后，我在下拉列表中发现了这一点。

.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文件中找到LESS代码，这对我想要更改的CSS负责？或者是否有更好的'编译器'让我在LESS文件中回溯CSS？

感谢名单

同， 汤姆斯特丹网页设计

Answer 1

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

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