Lessons: 20Length: 1.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.2 Day 2: Partials

Welcome to day nine. Today, you'll learn about partial files. And these are irregular SCSS or Sass files that can be imported, but are not compiled by Sass. So, let's see how we can use them. Partial files can either use the Sass or SCSS syntax, and start with an underscore. Now, as I was saying in the beginning of this video, these files will not be compiled to CSS, but they can be imported just like any other Sass or SCSS file. What we're gonna do here is we're gonna rename general SCSS and we;re gonna put an underscore in front of it, and same goes for layout. So as you can see when I made a change here, Sass automatically compiled my layout as CSS, but not general. So I'm gonna actually delete this layout.css, and I'm gonna rename this. So as you can see, no more compiling for these two files. Now, inside here I can keep exactly the same import syntax, @import "general/general" and "layout". This has not changed, and the CSS file is compiled correctly. Now one thing you need to know here is that you cannot include a partial and a non-partial with the same name in the same directory. So for example in here, in tutorial-code, I cannot have a file name, layout.scss. So without the underscore, it's just not gonna work. But other than that you can use partials to better organize you CSS files. And, of course, you don't need to worry about the Sass compiler transforming them into CSS. Also, what I said in the previous video about specificity in the order in which you're loading these files also applies here. So when you have a big Sass file that you wanna split or fragment into smaller partial files, be careful of the order in which you're loading them. And, yeah, that's basically it for partials. Now, for your exercise your going to have a few questions with true, false, yes or no answers. Simply read the question, type your answer here and compare it with the result from the exercise-answer folder. Good luck. That's it for partials, definitely a great feature of Sass that allows you to organize your style sheets a little better. Now, in day ten, you're going to learn about the media directive. That's coming up next.

Back to the top