Question

我使用Firebug来检查页面的CSS类和HTML元素。

但每当我检查时，它显示的是CSS类/这是理解的，但是，有没有办法可以检查相应的LESS变量？

例如：

如果我们使用firebug检查button，则.btn CSS选择器会显示font-weight: normal;，

.btn {
  font-weight: normal;
}

相应的LESS，

@btn-font-weight: normal;

Answer 1

最短的回答：不，但如果你跑

lessc less/style.less css/style.css --source-map

在观察者面前你能够做到   使用检查器查看每种样式来自哪个LESS文件。

不是您所希望的，但它至少可以帮助您追踪事情。

loong答案

在检查已编译的样式时无法看到.btn {font-weight: @btn-font-weight}，必须：将LESS编译为CSS会将@btn-font-weight替换为normal。

正如@ tjaart-van-der-walt所暗示，使用源地图可能对您有所帮助。使用sourc emaps，您仍然无法看到原始LESS变量，但您可以直接跳转到定义样式的LESS文件...即使是正确的行。你仍然需要引用你的原始文件来解决LESS特定的代码，但至少你会确切地知道在哪里看（例如我的偏少的文件。无：18而不是我的-compiled-css.css：212）

所以，如果你有一个无。

* {
    background: red
}

和一个两个人。

* {
    border: 1px solid green
}

编译为main.css

* {
    background: red;
}
* {
    border: 1px solid green;
}

在检查员中，您会看到类似

的内容

之前你会看到像

这样的东西

（＆＃34;类似＆＃34;因为这些是Chrome屏幕截图。）

有两个步骤可以让源地图工作：1。设置一个主文件（提及此文件给其他读过这个问题的人;在你的情况下已经处理过了：less/style.less是你的主文件），2。生成源地图，以及3.在检查器中启用源映射。

1。当我们到达B时，如果我们只能从单个文件生成源地图，那将会省去很多麻烦。这需要使用@import所有其他文件的主文件来构造LESS文件。例如，

/styles
  └─┬─ main.less
    └─ components
        └─┬─ one.less
          └─ two.less

和main.less看起来像

@import 'components/one';
@import 'components/two';

不完全确定您的Bootstrap Drupal主题的副本，但在我从您的链接下载的副本中看起来感兴趣的文件是less/style.less，因此您不必在此处执行任何操作。

2。在将LESS编译为CSS时，有许多方法可以生成源映射（有开发应用程序可以执行此操作，grunt和gulp工具以及命令行工具）。由于您正在使用裸命令行工具Deadsimple LESS CSS Watch Compiler，因此请坚持使用该模型。

要运行less-watch-compiler，您已经安装了LESS。如果其他人读到这个没有，那么你可以运行

$ (sudo) npm install -g less

除此之外，还安装了编译器lessc，它支持生成源映射。运行

$ lessc less/style.less css/style.css --source-map

这表示＆＃34;在less / style.less上运行less编译器，将编译的样式表输出到css / style.css，并生成style.css.map sourcemap 。（完整lessc documentation is here。）

（ 2.5 此时您可以运行less-watch-compiler less css，并按照正常的工作流程进行操作）

第3

在浏览器的检查器中启用源映射。 Firebug不支持源映射，但 Firefox 的内置检查器可以：打开检查器，右键单击任何样式，然后选择＆＃34;显示原始源＆＃34; Mozilla's documentation is here。（Fwiw，Firebug有望合并到Firefox的开发者工具中。了解here。） Chrome 还有内置支持：inspector - ＆gt; ＆＃34; ...＆＃34;菜单（右上） - ＆gt;设置 - ＆gt; ＆＃34;来源：启用CSS源地图＆＃34; （对我来说，默认情况下已开启），边缘（documentation here;默认情况下似乎已开启）。

有没有办法看到哪个相关的LESS变量用于CSS类/属性？

1 个答案:

loong答案