Save the original source to your local file system by hitting the Save link or Cmd/Ctrl-S: Sass index.scss:index.css -sourcemap -watchįor Less, you’ll have to set up another service to do the watching, like grunt. You can edit original source files in Style Editor tool, but order to see the changes apply to the page, you’ll have to watch for changes to your preprocessed source and regenerate the CSS file each time it changes. Now CSS rule links will show the location in the original file, and clicking these links will take you to the source in the Style Editor: Check off the Show original sources option: Right-click anywhere on the inspector’s rule view or in the Style Editor to get a context menu. The devtools will use this source map to map locations in the CSS style sheet to locations in the original source. css.map source map file for each CSS file, and add a comment to the end of your CSS file with the location of the sourcemap: /*# sourceMappingURL= */. To do this you’ll need Sass 3.3+ or Less 1.5+. When compiling a source to CSS, use the option to generate a sourcemap for each style sheet. The Firefox developer tools use source maps to show the line number of rules in the original source, and let you edit original sources in the Style Editor. Luckily you can now do this in the Firefox 29 developer tools using source maps. If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Sass and Less are expressive languages that compile into CSS.
0 Comments
Leave a Reply. |