I just get running the Less module. I was exited until I try to inspect a css file generated by a less file.

The line numbers in the generated css file don't match the the line numbers in the less file.

Even though this is very understandable since the css file is a generated file, this is a big problem to me. I'm very used to inspect (using Chrome) to look for the line number of the style of the inspected element,then I would go to css file to look for this line and make the changes I need.

Now with less this is imposible

How do you manage this?

Comments

jay.dansand’s picture

jay.dansand commented

Unfortunately as far as I know this is impossible - CSS doesn't have variables or mixins (function-like segments), but LESS provides these. So, this LESS code:

.mixin() {
   color: red;
}

body {
  .mixin();
}

generates this CSS:

body {color: red;}

There is no one-to-one relationship (which is exactly why LESS is awesome - it lets you do more in CSS with less work). Your best bet is probably to use distinctive selectors or values you can search the source for, and during development make sure that Drupal isn't aggregating CSS (but definitely turn it on in production). For example, if some attribute value is "1.01%" it'll probably be easy to find in the source during development.

One useful feature of LESS is nesting selectors, which also makes organizing your .less easier, and helps you to find code pieces later. For example:

#navigation {
  li {
    list-style: none;
  }
  border: 1px solid black;
}

If you know the selector is targeting something in #navigation, you can find it fairly easily.

corey.aufang’s picture

corey.aufang commented

Actually this is possible, just not currently implemented in lessphp.

#1143544: Firebug Support (via Fireless) was an issue about this, but postponed until the functionality is in mainline lessphp.

I suggest checking here (https://github.com/leafo/lessphp/issues) for status on line number debugging.

There is another issue: due to the way that this module currently handles @import, your line number counts would not be accurate if you have a library that you are importing. I am working on solutions to handle this better.

chefnelone’s picture

chefnelone commented

Thanks, due to the way I use to work I sadly must to wait until this feature is implemented.

taiger’s picture

taiger commented
Issue summary: View changes

Take a look at this module:
https://drupal.org/project/twbs_less

You do get correct line numbers in Firebug :)

It uses less.js if CSS aggregation is turned off, and less.php if it is turned on.
Watch mode is a little cleaner as there is no need to be constantly polling for changes. You can watch for changes by appending #!watch to the url.

corey.aufang’s picture

corey.aufang commented

Source maps will be supported soon.

You can track the progress of the implementation in the following ticket:

#2203549: Source Map support

corey.aufang’s picture

corey.aufang commented
Status: Active » Closed (won't fix)

If you want to use source maps, you will need to use 7.x-4.0 once it is released.

You will also need to use oyejorge/less.php or less.js to get source map support.