0

I am using Bootstrap theme in Drupal CMS.

I use Firebug to check the CSS class and HTML elements of the page.

But whenever I check, it is showing CSS class/ which is the understood, However, is there a way we can check the corresponding LESS variable?

For Example:

If we check button using firebug, the .btn CSS selector will shown font-weight: normal;,

.btn {
  font-weight: normal;
}

And Corresponding LESS,

@btn-font-weight: normal;

codenext
  • 203
  • 3
  • 10
  • What are you using to compile the LESS files? – Tjaart van der Walt Aug 29 '16 at 05:22
  • @TjaartvanderWalt I used this command `less-watch-compiler less css` in my terminal and I followed this [answer](http://stackoverflow.com/questions/38946985/what-is-the-equivalent-of-command-compass-watch-for-less-css-pre-processor) to set the less-watch. I do not have much knowledge about that, so might be you can make out from this information. – codenext Aug 29 '16 at 05:30
  • maybe check out this question http://stackoverflow.com/questions/20979732/compile-less-files-with-source-maps – Tjaart van der Walt Aug 29 '16 at 05:44
  • Clarifying: So you're hoping for a way to see `.btn {font-weight: @btn-font-weight}` when inspecting the final page? – henry Sep 01 '16 at 20:49
  • @henry Yes exactly.. – codenext Sep 03 '16 at 12:44

1 Answers1

1

Shortest answer: no, but if you run

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

before your watcher you'll be able to use your inspector to see which LESS file each style comes from.

Not what you're hoping for, but it least it'll help you track things down.

The loong answer

There is no way to see .btn {font-weight: @btn-font-weight} when inspecting the compiled styles, necessarily: compiling LESS to CSS replaces the @btn-font-weight with normal.

As hinted at by @tjaart-van-der-walt, using source maps may be helpful for you. With sourc emaps, you still won't see raw LESS variables but you will be able to jump right to the LESS file where the style is defined… the right line, even. You'll still need to refer to your original file to sort out LESS-specific code, but at least you'll know exactly where to look (e.g. my-partial-less-file.less:18 rather than my-compiled-css.css:212).

So if you have a one.less

* {
    background: red
}

and a two.less

* {
    border: 1px solid green
}

that compile to main.css

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

in the inspector you'll see something like

enter image description here

where before you would have seen something like

enter image description here

("something like" because these are Chrome screenshots.)

There are two steps to getting source maps working: 1. set up a main file (mentioning this for anyone else who reads this question; in your case this is already taken care of: less/style.less is your main file), 2. generate the source map, and 3. enable source mapping in your inspector.

1. When we get to B, it's going to be save a lot of hassle if we can just generate the source map off a single file. That requires structuring the LESS files with a main file that @imports all your other files. For example,

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

and main.less looks like

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

Not exactly sure what your copy of the Bootstrap Drupal theme, but in the copy I downloaded from your link it looks like the file of interest is less/style.less so you don't have to do anything here.

2. There are a bunch of ways to generate source maps while compiling LESS to CSS (there are dev apps that will do it, grunt and gulp tools, and command line tools). Since you're using using the bare command line tool Deadsimple LESS CSS Watch Compiler, let's stick with that model.

In order to run less-watch-compiler, you've already installed LESS. In case anyone else reading this hasn't, to do that you run

$ (sudo) npm install -g less

Among other things, that installed the compiler lessc, which has support for generating source maps. Run

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

This says "run the less compiler on less/style.less, output the compiled stylesheet to css/style.css, and generate a style.css.map sourcemap. (Full lessc documentation is here.)

(2.5 at this point you can run your less-watch-compiler less css, and follow your normal workflow)

3.

Turn on source mapping in your browser's inspector. Firebug doesn't support source mapping, but Firefox's built-in inspector does: open the inspector, right-click on any style, and select "show original sources." Mozilla's documentation is here. (Fwiw, Firebug is on track to be merged into Firefox's Developer Tools. Learn about that here.) Chrome also has built-in support: inspector --> "..." menu (top right) --> Settings --> "Sources: Enable CSS source maps" (for me, this was turned on by default), and so does Edge (documentation here; appears to be turned on by default).

henry
  • 4,244
  • 2
  • 26
  • 37