Separate Your Stylesheet Into Partials

[MUSIC] 0:00 The CSS file for even a moderately complex website is immensely long, 0:04 containing hundreds or even thousands of styles. 0:08 Finding the single style you want to edit could be like finding a needle in 0:12 a haystack. 0:15 What's worse? 0:16 When it's time to add a new style to a style sheet with thousands of styles, 0:16 where should you put it? 0:20 The more styles a site has, 0:21 the more difficult it can be to maintain a single style sheet. 0:23 Currently, our style sheet is one lengthy list of variables, mix-ins, 0:27 placeholders and rule sets. 0:30 And if we keep adding components to the site, it's going to get crowded fast. 0:32 Fortunately Sass has a great solution to this problem, partials. 0:37 They're one of the main benefits of working with Sass. 0:40 Partials is like split your style sheets into separate files. 0:43 They help marginalize your CSS and keep things easier to maintain. 0:46 Each partial is a single file and its like a small piece in the big CSS puzzle. 0:50 It contains a portion of your style sheet. 0:54 You will use partials to group related styles. 0:56 For example you could place audio variables inside a partial and 0:59 your CSS reset and base styles inside other partials. 1:02 You can create as many partials as you like while you're writing you CSS and 1:05 when it's time to write your finals CSS file, 1:09 Sass will merge the partials into a single CSS file. 1:10 Let me show you how we can break our main style up into small chunks using Sass 1:14 partials. 1:17 It's possible to split regular CSS into multiple files, however 1:19 each CSS file creates and additional HTTP request for the browser to process. 1:23 Too many of these request affect the performance of your site, so 1:28 many developer avoid this approach. 1:31 Sass partials give you the best of both world, multiple files to organize your 1:33 styles with the performance benefit of a single production ready CSS file. 1:38 You can create tens or 1:42 hundreds of partials without impacting your site's performance. 1:43 Using partials is a two-step process. 1:47 First, you create the partial files to organize your CSS 1:49 into related groups of styles. 1:53 And second, import the partials into a regular Sass file. 1:54 Sass compiles the imported partial files and 1:58 outputs the final CSS into a single file. 2:01 So let's start with creating partials. 2:03 To create a partial, simply add an underscore character 2:06 to the beginning of the name for a sass or scss file. 2:08 The underscore is when instruct says that the file should not be compiled into CSS. 2:12 So we're gonna break out related sections of our style sheet into partials and 2:16 this will help organize our project. 2:20 For instance, variables can be defined in their own partial. 2:22 So I'm going to create new folder named Partials inside the scss folder. 2:25 In the partials folder let's create a new file and 2:34 name it _variables.scss. 2:39 Now we'll cut all variables out of style.scss and 2:49 paste them in our new variables partial. 2:54 Saving these changes produces an error in the console and output CSS. 3:01 The error says that there is an undefined variable 3:08 of color-text on line 35 of style.scss. 3:13 You see, Sass won't directly compile partial files. 3:17 It ignores files with the underscore character, so in this case, 3:21 Sass did not include the context of this variables partial when compiling to css. 3:24 So right now all variables in our project are undefined. 3:30 Saas will compile the contents of a partial only when you import 3:36 it from within a a regular Saas or scss file using the import directive. 3:40 So at the very top of style.scss, I'll write a comment for our partial imports. 3:46 Then I'll import the new variables .sspartials into this 3:54 file by typing @import followed by the path to the file inside quotes. 3:59 When importing a partial, you can leave out the underscore in the file name and 4:12 the .scss word.sass extension. 4:17 Jus make sure you wrap the file name or path to the file in single or 4:20 double quotes otherwise Sass will throw an error. 4:24 Keep in mind that the style.scss file 4:27 does not have an underscore character in its name. 4:30 It's a regular Sass file. 4:32 So when we save and compile these changes the undefined variable error 4:34 no longer appears in the console or the output CSS. 4:39 All our rules can now reference the variables inside the variables partial and 4:44 include their values in the output CSS. 4:48 Next, let's break out other related sections of our style sheet into partials, 4:52 like the mixins and and place holders. 4:57 So I'll create a new file inside the partials folder 4:59 named _mixins.scss. 5:04 Then I'll select and cut all mixins out of style.scss and 5:10 paste them inside the mixins partial. 5:15 You can import multiple partials by respecifying the import directive, so 5:24 for example in style.scss we can type import, 5:29 Followed by partials mixins. 5:35 But by now, you know that Sass helps you to avoid retyping and repeating code. 5:39 So of course, Sass provides a shortcut for grouping your partial imports. 5:43 You define just one import directive then write the files as a comma separated 5:48 list I usually place them on separate lines to make the code easier to read. 5:54 All right, let's keep going. 6:04 Next, we'll create a partial for our placeholder selectors. 6:05 So inside the partials holder, we'll create a new file named _helpers.scss. 6:09 Then I'll cut the clear fix and button place holders out 6:20 of style.scss and paste them inside helpers.scss. 6:25 And import the new helpers partial in style.scss. 6:32 So I'll replace the semi-colon here with a comma. 6:39 Then on the next line specify the path to the helper's partial with 6:42 partial/helpers then add the semi-colon to this line. 6:47 So by separating our code into the multiple scss file, so 6:52 our style sheet is starting to look less cluttered. 6:56 And you can create as many partials as you want while building your project, and 6:59 Sass will compile them to a single file to use in production. 7:02 You can also import partials onto other partials. 7:08 To make our project even more organized, let's place 7:11 all the main styles written here in style.scss in a partial of their own. 7:15 So in the partials folder let's create a new file 7:19 named _main-styles.scss. 7:25 Then I'll go ahead and select and 7:29 cut all remaining rules out of style.scss and 7:33 paste them into main-styles.scss 7:37 Then will import the file at the top of style.css. 7:45 So now, styles.scss only does one thing, 7:54 it lists the partials that Sass should import and compile. 7:57 And because there's no underscore in the file name it's the file that Sass uses 8:01 to name the output CSS file. 8:05 On a larger Sass project with dozens or hundreds of partial files, 8:09 you normally won't place all your partials inside one folder. 8:13 You'll likely organize and 8:17 sort them into multiple directories containing several partials. 8:18 For example, you may have a directory containing partials for 8:22 your CSS reset, base and typography styles. 8:24 Another directory just for your layout and component styles. 8:28 And one for your variables, functions, mixins, and helpers. 8:31 You could also place all your meta queries into their own partial. 8:35 But I'm going to teach you a convenient way to manage meta queries with Sass 8:38 in the next video. 8:41 Now, I'm going to stop here but you don't have to. 8:43 Why don't you practice creating partials by breaking main-styles.scss out into 8:46 other partials for the base, layout and component styles. 8:51 You could even take things a step further and 8:55 sort all related partials into directory of their own Just remember to 8:57 keep your partials simple by only breaking up related bits of your code. 9:02 In the next video, I'll show you how I organize the files. 9:06 It's important to mention, that when importing partials, the order in which you 9:11 import them matters because that's the order in which they compile to CSS. 9:15 So import any dependencies first or a code that's being referenced in other rules 9:19 by variables, mixins and helper rules. 9:23 Then input your base layout, component styles and so on. 9:26 I've included links to Treehouse videos that teach you advanced methods for 9:30 structuring your Saas projects in the teachers notes. 9:34