4.1 Day 1: @import Directive

Welcome to day eight. Today you'll learn about the import directive that's used for importing Sass and SCSS files. Let's begin. In CSS, the import rule allows you to import style rules from other style sheets. Now, Sass extends this rule to allow you to import SCSS and Sass files. All the imported files will be merged together in a single CSS output files. So let's have a look at our demo SCSS file here. And as you can see we have several different sections. We have one for Variables, one for General styles, and one for Layout specific. Now, let's say, for example, that we want the general styles to sit in their own style sheet and the layout ones in a separate style sheet. So what we can do is we can create a new file here called general.scss. And we can actually take our General styles, and we're gonna paste them in the other SCSS file. And let's do the same for the layout. So, copy this, and create a new file here, layout SCSS, paste these in. And then what I need to do is, I need to say, @import "general.scss," and @import "layout SCSS". And this will get those styles, import them, and compile a single styles.css file, which you can see right here. Now, by default Sass looks for other Sass files in the current directory. But if I have the files that I want to import in another folder, I need to specify that. So, for example, if I create a new folder here, called the general, and I wanna move the SCSS file in there, I'm gonna simply drag and drop. And in here, I'm gonna say "general/general.scss". Now, here, you can also see the CSS files being generated, and that's because I am watching the entire tutorial code folder for changes. So Sass automatically compiles SCSS files. But, don't worry about these, the only pieces you are interested in are the .scss files. Now, I can also skip the file name extension because if no extension is provided, Sass will look for the file name with the extension .sass or .scss. So I can remove this entirely and it's still going to work, it's gonna compile properly. What I can also do is I can import multiple files in a single import. So instead of two of these, I can do, "layout," and this is also valid code. Now, you have to be careful when using the import directive because the order in which you import will be the order in which style CSS is generated. So, for example, here I have the General styles and then the Layout. But if I switch these around, I will have the Layout first and then the General. That's really important because normally in a CSS file you go from very generic styles at the top two more specific styles at the bottom. And if you switch things around, you might get results that you don't want. So be careful about the order in which you're importing files. Now, there are cases when a Sass import will actually compile to a CSS import. First of all, when the file extension is CSS, so I have a dummy.css file here. So, If I do @import "dummy css," this will actually be compiled into a CSS import, as you can see here. Another case is when you are importing a URL. So, if you do something like @import url, a google font for example, this will also be complied to CSS import. Also, when you're using media queries. So in CSS you can basically say something like @import "print" only for print, so this will actually compile to CSS. And another case is when the file name begins with HCP or HTTPS. For example, when you do something like this, you will also get a CSS import. Other than that, if you just specify a file name without an extension, Sass will look for those .css and .sass files, and will grab the styles from those files and compile one single file. Now, for the exercise, you have a few questions where you need to answer with true, false, yes or no. Simply, read the question, type your answer here, and then compare it with the answer from the exercise-answer folder. Good luck. And that's it for the import directive. Now, you can also use this to import what's called partial files. Those are coming up in day nine.