Working With LESS and the Chrome DevTools - Tuts+ Code Tutorial - 0 views
code.tutsplus.com/...the-chrome-devtools--net-36636
less chrome html markup tools webdesign css workflow source maps workspaces editor editing grunt preprocessor
![](/images/link.gif)
![](/images/uploaded-cache.png)
-
While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
-
In a world without Source Maps, DevTools would display styles originating from the compiled CSS. Line numbering would not be useful due to a mismatch between compiled CSS and the source CSS. With Source Maps, when inspecting a DOM node on the page, DevTools will automatically show the styles originating from the LESS source file.
- ...2 more annotations...
-
Not only does this work for remotely hosted files, but also for local ones with the added benefit of persisting your changes to a file.
-
You can edit a file in the Sources panel and those changes will persist to disk when you Command/Control-S.
-
This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.
-
This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.
-
"This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. "