codenext codenext - 3 months ago 8
CSS Question

Is there a way to see which corrosponding LESS variable used for the CSS class/property?

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;

Answer

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).