Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Source maps – Less

Details

You have the option of generating an additional file when you compile your Less code into CSS when using the Less command line tool: a source map. The source map file name has a .css.map extension and matches the name of your CSS file. For example, if your CSS file is named main.css, then your source map file will be called main.css.map.

To generate the source map, you can add the --source-map flag to your less command, like this:

lessc main.less main.css --source-map

You will also see a comment in your CSS file that connects your CSS file to the source map. It will look something like this:

/*# sourceMappingURL=main.css.map */

When you’re using your browser’s built-in debugging tools, the source map tells it what line in your Less code is responsible for the styles on an element. This makes it easier to debug your Less code if your styles aren’t turning out the way you want them to.

Without the source map, the browser can only tell you the line in the CSS output file that is responsible for an element’s style, which makes debugging your Less code harder.

Exercises

There are no exercises for this lesson.

Back to: Less Reference