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 Modular CSS with Sass Getting Modular with Mixins and Functions Colors with Sass Maps

Ulises Calvo
Ulises Calvo
2,233 Points
Posted by Ulises Calvo
Ulises Calvo
2,233 Points

Messy final compiled SCSS

When I open a styles file from say a WP theme, I don't see all that messy CSS with inline directory path comments.

Instead what I see is that the author has a nicely organized sequence of styles even with a neatly commented index on the top.

Quetion is: Do we have to re-organize the final compiled CSS again (even after the whole load of work we did with sass) to make it look 'decent' after compiled from scss? That seems to be a lot of work.

Tnx for the answer.

2 Answers

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

You don't have to re-organize .css file compiled with SASS because anyone working on stylesheet will be working with SASS file not CSS file. SASS is just separate layer that makes CSS easy to maintain.

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

Thanks Gunhoo, but does the end WordPress user (not a team of front end developers) deal with sass? I have never seen a theme like that, all you get is a pure css styles sheet.

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I'm not entirely sure how word press user will interact but does any of the end user need to tweak CSS file themselves?

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

Often times they modify themes, since right out of the box a theme may not represent someone else's corporate image, colors, etc. I was and still am a WP user, and that is how I got to learn CSS in the first place, tweeking themes.

Kai Nightmode
Kai Nightmode
37,045 Points
Kai Nightmode
Kai Nightmode
37,045 Points

If you have a SASS file, you always want a to edit that and not the CSS it generates. This is especially important if you work with a team because SASS will overwrite the corresponding CSS file and that means you could lose changes anyone does directly to the CSS file.

If you want pretty source code you could have SASS not minify the output CSS. For extra bonus points, minify the output CSS and enable source maps. That way clients get minified code and developers get expanded, human readable code. ^_^

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

Thank you Daniel, I am not quite used to sass, I guess I just want to get a nice styles sheet that is nice to read for the WP end user that consumes themes, something like this:

Table of Contents: - 1.0 Reset, Necessary & Repeating Styles - 2.0 Page Structure - 3.0 Header -- 3.1 Main Menu ....etc. which I know is not sass job, I would have to go line by line manually. Which is what I was doing in the first place in pure css before trying out sass, but now with sass is like working detached from the final css in the background all the time.

Thank you for your answer!