Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Unsubscribed User
Unsubscribed User
18,894 Points

Sass in devtools

I'm in the middle of watching sass basics and have a question about incorporating it with Chrome devtools.

Normally when i do a web project I edit my css file in devtools to get live feedback while I work.

I recently set up a devtools workspace to view my scss to work with it like I did with the css file, but whenever I inspect an element it always points to the rule in the compiled css file instead of the scss file.

I have looked everywhere and cannot find a solution to this on google. Any of you smartypants' know how to set this up?

1 Answer

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Tony Hersey depending how you are compiling your Sass, you'd want to have something called Sourcemaps. These help, when Inspecting, where in the original Sass files or partials, the element exists.

This resource might help; http://thesassway.com/intermediate/using-source-maps-with-sass