1 00:00:02,610 --> 00:00:06,200 Now we had a look at operators and variables and so on, 2 00:00:06,210 --> 00:00:11,790 let's now dive into better imports and partials in this video. What does this mean? 3 00:00:11,910 --> 00:00:15,930 We already got an import in place pointing to a CSS file 4 00:00:16,170 --> 00:00:22,470 and if you import from a CSS, not a .scss or a SASS file, then SASS will leave this import as it 5 00:00:22,470 --> 00:00:23,160 is, 6 00:00:23,160 --> 00:00:28,320 if you check out the compiled file, you'll see it wrapped it in this URL function provided by default 7 00:00:28,390 --> 00:00:30,880 CSS but it still works like default CSS 8 00:00:31,010 --> 00:00:34,770 and let's have a look at how this import works. 9 00:00:34,770 --> 00:00:41,760 If we open the developer tools on our page and we go to the network tab there and reload the page, you'll 10 00:00:41,760 --> 00:00:43,920 see, we get three requests: 11 00:00:43,920 --> 00:00:46,240 the index.html file and then main.css and the typography file. 12 00:00:46,260 --> 00:00:49,920 This is how it works, 13 00:00:49,920 --> 00:00:55,300 these are simply requested because we're importing typography in the main.css file. 14 00:00:55,320 --> 00:01:00,260 Now sometimes you want to generate one big CSS file but still split it up during development, 15 00:01:00,300 --> 00:01:06,640 so that you have an easier time managing it but still that you can spit out one big file. 16 00:01:07,230 --> 00:01:13,270 And for our case here, this would make sense because in typography, we're again using our color, so it would 17 00:01:13,270 --> 00:01:16,480 be nice if we could also use our variables in there. 18 00:01:16,500 --> 00:01:23,150 So for that, I will create a so-called partial. Now a partial starts with an underscore in the file name 19 00:01:23,340 --> 00:01:25,840 and then you can name it whatever you want, here I'll name it 20 00:01:25,870 --> 00:01:28,700 variables.scss. 21 00:01:28,800 --> 00:01:34,860 The idea behind a partial is that you can include it in many other files and behind the scenes, SASS will 22 00:01:34,860 --> 00:01:41,330 ensure that it only gets included once or that its values are only used once. 23 00:01:41,340 --> 00:01:48,060 So what we can do now is, we can go back to the main.scss file and take all our variables we have 24 00:01:48,060 --> 00:01:52,760 in there and put them into our variables partial file. 25 00:01:52,890 --> 00:01:57,790 Now we just need to import from that file to make sure that our code works again. 26 00:01:57,810 --> 00:02:00,210 So back in the main.css file, 27 00:02:00,300 --> 00:02:06,420 we again add an import statement and now we import from variables.scss, 28 00:02:06,470 --> 00:02:09,400 like this. 29 00:02:09,610 --> 00:02:14,030 If you save this, it successfully compiles the main.css file again, 30 00:02:14,230 --> 00:02:17,490 it also successfully uses our colors and the other variables, 31 00:02:17,500 --> 00:02:23,050 so this seems to work but you don't see the import statement pointing to the variables.scss file 32 00:02:23,620 --> 00:02:26,970 because it only included this during the compilation step, 33 00:02:27,130 --> 00:02:33,070 looked up the values and took it into account while compiling our code but it didn't add it. 34 00:02:33,100 --> 00:02:35,010 How would I have added this anyways? 35 00:02:35,170 --> 00:02:38,260 These variables are not supported by normal CSS. 36 00:02:38,920 --> 00:02:44,240 So we're using a partial and we can also use the typography file of course. 37 00:02:44,290 --> 00:02:48,100 Let's copy the import statement from the main.scss file, 38 00:02:48,250 --> 00:02:53,390 let's add it to our typography file here, like this 39 00:02:53,760 --> 00:02:58,210 and let's also now use our map then, so map-get 40 00:02:58,390 --> 00:02:59,410 and now it's the 41 00:02:59,610 --> 00:03:02,710 colors map and the main color. 42 00:03:02,710 --> 00:03:07,460 Now this is not supported by the editor because this still is a CSS file, 43 00:03:07,480 --> 00:03:10,430 we should turn it into an SCSS file too. 44 00:03:11,050 --> 00:03:18,100 So now we turn this into SCSS file, which is now also using our variables. 45 00:03:18,100 --> 00:03:24,880 What we can now do is we can save that file, go back to the main.scss file and adjust this import 46 00:03:24,940 --> 00:03:29,280 too and import the typography.scss file. 47 00:03:29,440 --> 00:03:34,880 If we save this and we go back to the main.css, you now see something different. 48 00:03:34,990 --> 00:03:42,570 Now there no longer is an import statement but instead the code from the typography file was simply copied 49 00:03:42,580 --> 00:03:49,360 into the main.css file and the values from the colors were replaced because it still understands this 50 00:03:49,360 --> 00:03:52,150 import here in the typography file. 51 00:03:52,210 --> 00:03:59,110 So now, we only have one big file and as a developer, we still work with multiple files which is typically 52 00:03:59,110 --> 00:04:02,200 what we want because it makes our life easier. 53 00:04:02,200 --> 00:04:08,260 If we go back to the running page and we reload it, we no longer see the typography request here hence 54 00:04:08,620 --> 00:04:11,810 because this is now included in the main.css file. 55 00:04:11,950 --> 00:04:19,450 So this is a cool way of creating one file which leads to less HTTP requests to be made, whilst still 56 00:04:19,450 --> 00:04:25,060 ensuring that we have a comfortable of way working with these files because we still work with our files, 57 00:04:25,060 --> 00:04:30,750 we now even have a separate file for the variables but we get one file as a result. 58 00:04:31,150 --> 00:04:36,820 And this is with the help of partials for the variables file and the better import statement which will 59 00:04:36,820 --> 00:04:39,820 actually include the content, as it does here 60 00:04:39,900 --> 00:04:43,960 for this import instead of really making a separate request.