Menu
I just follow this tutplus tutorial for source map sass.
I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?
My sass version is 3.3.8 (Maptastic Maple)
How can I make SASS editing work in Chrome Devtools?
750
Sass capabilities in Chrome DevTools are a great way to view and modify Sass resources, although don't forget to enable it in both about:flags and in the settings panel. When using Sass and the Chrome DevTools in a project, you're likely to have a more efficient workflow with viewing/editing the source file, rather than the generated file.
Luckily, Chrome also provides some great tools for quickly prototyping CSS changes using DevTools. To the right of the HTML view in the “Elements” tab, there is a view showing a breakdown of what CSS rules apply to the selected element. This view can be extremely helpful for debugging a plethora of CSS bugs.
Previously, until the very recent time (up to Chrome 27, as far as I can tell), Chrome Development Tools, with help from Chrome Experiments, supported Sass (SCSS to be precise) "inspection". The support manifested in ability to inspect the site's CSS file and if the CSS was compiled from SCSS using --debug-info (SCSS 3.2.7), then in CSS panel:
Chrome DevTools provide some convenient functionality to make live editing CSS easier to do. The most helpful for those less familiar with CSS is autocomplete. As you type in the name of your style, Chrome will suggest likely matches. Once you enter the name of the style, Chrome will also help you use the correct value for that style.
I made it work. SASS support is no longer an experiment: It's now a standard. I just follow simple steps to make it work.
1) Open your inspect element on chrome and click on gear icon which appears to the top right.
2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)
3) Click on Workspace tab on the left panel just below the General tab.
4) Add your source code folder by clicking the Add folder button (close the box.)
5) Go on Sources tab and find your scss file.
Now you can make changes and hit ctrl+s it will automatically change on your style.scss.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
