CSS中的逆向工程

如何在无引导文件中追溯（“反向工程”）CSS

我在Joomla 3.4.x中使用自己的Twitter引导（3.x）模板创建了一个网站。Bootstrap附带了很多较少的文件，我使用Crunch“编译”了Bootstrap.min.css文件。Bootstrap中的文件减少了40多个，混合文件减少了近30个，它们都“编译”到Bootstrap.min.css

我对LESS文件做了一些修改，以使网站符合我的喜好。此外，我还制作了一个custom.less文件，并将其合并到bootstrap.less文件中：

@import custom.less

在将CSS文件上传到我的网站后，我进入该网站并使用Firebug处理CSS。我做了一些更改，当我喜欢这些更改时，我想在我的无引导文件中应用这些更改，但我发现很难追溯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文件中的最后一个文件，并在其中写入所有样式覆盖，但在我看来，我会创建大量多余的代码，最终会使网站速度变慢

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

塔克斯

汤姆，

---

Thomsterdam网页设计

Firefox开发工具和Chrome开发工具都允许

---

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

Firefox开发工具和Chrome开发工具都允许

---

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

。看起来很有希望！当网络在internet服务器上“实时”且源文件在本地计算机上时，我也可以使用它吗？（我在Windows7中工作）使用源地图有很多方法。它们可能指向原始文件，可能指向作为注释直接注入最终css的源代码，等等。因此，这完全取决于您如何构建它们，您希望它们做什么，以及特定浏览器支持什么。更容易开始使用它们（Crunch使用相同的无引用编译器库，因此它应该有所有相应的选项），并看看有什么可能……看起来很有希望！当网络在internet服务器上“实时”且源文件在本地计算机上时，我也可以使用它吗？（我在Windows7中工作）使用源地图有很多方法。它们可能指向原始文件，可能指向作为注释直接注入最终css的源代码，等等。因此，这完全取决于您如何构建它们，您希望它们做什么，以及特定浏览器支持什么。开始使用它们会更容易（Crunch使用相同的无引用编译器库，所以它应该有所有相应的选项），并看看有什么可能。非常感谢，Sebastian！我会深入研究这个a.s.a.p.非常感谢，塞巴斯蒂安！我会深入研究这个a.s.a.p。