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 Pixels to Em Function

Leigh Maher
Leigh Maher
21,830 Points
Posted by Leigh Maher
Leigh Maher
21,830 Points

Confusion about set up of files

I struggling to understand the basics of how these files are set up and how they relate to each other e.g. how do all these files link and talk to each other and how does the SaSS that we write change the normal CSS file.

It seems to me that the course starts of assuming we understand the basics of SaSS already, which I don't.

Would be great if this could all be explained, and give us a broader overview and context.

4 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there Leigh,

I would agree that the Modular Course is a very steep learning curve from Sass Basics and I too went straight from that knowledge into the Modular Course. So I had the same fears as you.

Have you taken the CSS-to-Sass course that Guil Hernandez recently released. This is a sort of "Mini" modular CSS course that really made me look at the Modular Course in a new light. I would suggest you take that if you haven't already and then move on to the more advanced course.

But to try and explain the answer to your question, what SCSS files do is convert Sass into an output that the browser can understand, using an interpreter which then outputs into standard or "vanilla" CSS.

So it's SCSS which then gets output into the CSS we all know and love.

But if you were to put an underscore at the front of an SCSS filename nothing will get output. So you'd have to @import the SCSS from that file into another SCSS file that you don't underscore so "style.scss" not "_style.scss" and which will then grab the code from one file to another and output it.

What Guil does in these courses is has an organised structure of "partial" files (our underscored scss files) which outputs code to a single CSS file.

I hope I've managed to expain this well enough for you. :-)

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Jonathan,

Thanks very much for your quick, and detailed reply.

I'll definitely go through that CSS-to-Sass course now before going any further with this.

Ok, so I get that SaSS is converted into plain CSS, and I've just looked at the application.scss and I can see that each of the underscored files is being called in using an import function. That makes sense now. Thanks. However, I still don't understand how the converted CSS from application.scss get imported into the application.css. How are these 2 files linked?

Thanks,

Leigh

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi KLleigh,

I assume you know how to use the Ruby interpreter and the watch command

sass --watch scss:css

If you were to use that command, Ruby has to look for a suitable file to output the code to. So that the one remaining SCSS file that isn't a partial, that has all the import codes is ready to transfer the code using the interpreter and output the codeto another file, in this case, in a folder called CSS.

If you have an output CSS file, for example application.css, the interpreter is simply saying "Aaah, there's a CSS file I can put it into, I'll just output the CSS here."

You can of course explicitly set an output CSS file with a command like this

sass --watch application.scss:application.css`

I confess there's probably a better command than that to use it's been a while since I so much as opened Ruby unfortunately but it highlights the point I think.

Matt Brock
Matt Brock
28,330 Points

Leigh, you have to use a compiler which is software that preprocceses the .scss file into a linked .css file. You write your code in the Sass file and it magically updates in your CSS file. Pretty awesome! Here's a few:

Good luck!

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Hi Jonathan,

I get the principle of what you're saying, but I've never used Ruby. Do I need to understand Ruby to work with Sass?

Thanks,

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I would checkout Hampton's course in Sass Basics for a refresher in how to use Ruby to drive your Sass workflow!

Think of it as a language interpreter rather than a language itself :-)

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Just saw that course. Thanks Jonathan.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks Jonathan and Brock. I've gone through the CSS course listings and I see that there is basics SaSS course. This must be the place to start! Not sure how I missed it before.

Thanks,

Leigh

Matt Brock
Matt Brock
28,330 Points

You bet!