1 00:00:03,250 --> 00:00:06,680 We'll now move on to the next exercise, 2 00:00:06,680 --> 00:00:11,535 where we will use SCSS syntax to define 3 00:00:11,535 --> 00:00:18,325 our SCSS classes and automatically convert them into their corresponding CSS classes. 4 00:00:18,325 --> 00:00:22,220 We'll be doing exactly the same set of steps 5 00:00:22,220 --> 00:00:26,890 that we did for the last exercise that we completed just now, 6 00:00:26,890 --> 00:00:31,470 but using the SCSS syntax. 7 00:00:31,470 --> 00:00:38,885 To get started, in your project in the CSS folder, 8 00:00:38,885 --> 00:00:47,180 let's create a new file and name it as style start SCSS. 9 00:00:47,180 --> 00:00:51,660 Now in this file we'll define our SCSS classes and then automatically 10 00:00:51,660 --> 00:00:56,795 convert that into our CSS classes. 11 00:00:56,795 --> 00:01:01,350 So in there, let's start out by first defining the variables, 12 00:01:01,350 --> 00:01:05,110 so I'll start out with light gray, 13 00:01:06,810 --> 00:01:11,820 I have now added in a few more variables here again with 14 00:01:11,820 --> 00:01:16,940 the same names as we used in the last exercise earlier, 15 00:01:16,940 --> 00:01:20,760 but with the SCSS syntax so 16 00:01:20,760 --> 00:01:25,630 all the variables are preceded with the dollar sign to define them as variables. 17 00:01:25,630 --> 00:01:27,750 Next will define the mixin. 18 00:01:27,750 --> 00:01:43,888 So for the mixin, I would say mixin zero-margin, pad-up-down, 19 00:01:43,888 --> 00:01:48,920 pad-left-right, 20 00:01:48,920 --> 00:01:54,920 and we define the values as before. 21 00:02:17,930 --> 00:02:21,130 Now that we have completed defining the mixin, 22 00:02:21,130 --> 00:02:26,690 we can make use of it in our SCSS classes that we define later. 23 00:02:27,480 --> 00:02:31,280 Let's now define some SCSS classes, 24 00:02:31,280 --> 00:02:40,025 so I'll define the row header which I will make use of 25 00:02:40,025 --> 00:02:44,740 the zero margin mixin 26 00:02:44,740 --> 00:02:52,900 with the values zero pixel here. 27 00:02:53,620 --> 00:02:59,055 We'll continue to define a few more classes that they will add in here, 28 00:02:59,055 --> 00:03:01,910 so you can see that I have defined along with 29 00:03:01,910 --> 00:03:05,290 the row header and the row content where I used 30 00:03:05,290 --> 00:03:12,730 the mixins and the footer and Jumbotron address and so on, 31 00:03:12,730 --> 00:03:15,230 and you can see the use of 32 00:03:15,230 --> 00:03:21,190 the variables that we have defined earlier in this example there. 33 00:03:21,190 --> 00:03:27,875 The code obviously is available in the exercise instructions that follow this video. 34 00:03:27,875 --> 00:03:32,295 Next we will add in if you nesting classes. 35 00:03:32,295 --> 00:03:35,395 Just like we did in the last exercise, 36 00:03:35,395 --> 00:03:40,780 we'll add in the carousel class with the background set to background dark and then 37 00:03:40,780 --> 00:03:42,345 inside where we'll nest 38 00:03:42,345 --> 00:03:47,065 a carousel item class with the height set to carousel item height, 39 00:03:47,065 --> 00:03:51,945 and then another inner class colors image with some properties there, 40 00:03:51,945 --> 00:03:56,945 and then the carousel button class as we defined earlier. 41 00:03:56,945 --> 00:04:02,070 So with this, we have made the changes to our SCSS classes, 42 00:04:02,070 --> 00:04:03,925 so let's save the changes. 43 00:04:03,925 --> 00:04:09,200 Now, we need to convert this into its corresponding CSS file. 44 00:04:09,200 --> 00:04:13,835 To convert our SCSS source code into the corresponding CSS code, 45 00:04:13,835 --> 00:04:19,395 we're going to take the help of yet another node module called node-sass. 46 00:04:19,395 --> 00:04:24,485 Lets install the node module by typing npm 47 00:04:24,485 --> 00:04:33,845 install save dev--save dev and then node-sass. 48 00:04:33,845 --> 00:04:37,690 So this way, we will save this node-sass package 49 00:04:37,690 --> 00:04:42,020 as a development dependency in our package.json file. 50 00:04:42,020 --> 00:04:44,160 Once the installation is complete, 51 00:04:44,160 --> 00:04:49,090 we're going to add in a script into our package.json file. 52 00:04:49,090 --> 00:04:52,020 Going to our package.json file, 53 00:04:52,020 --> 00:04:56,430 if you scroll up you would see that in the dev dependencies, 54 00:04:56,430 --> 00:05:00,380 now the node-sass is also added into the dev dependencies. 55 00:05:00,380 --> 00:05:04,520 We'll now add a script into our package.jsm file, 56 00:05:04,520 --> 00:05:07,015 so right half of this slide, 57 00:05:07,015 --> 00:05:11,225 I'm going to add in a script named SCSS and then 58 00:05:11,225 --> 00:05:20,185 this script will be node-sass -o CSS/, 59 00:05:20,185 --> 00:05:26,500 meaning that the output of this the converted files will be in the CSS folder, 60 00:05:26,500 --> 00:05:29,715 and the source here will also be in the CSS folder. 61 00:05:29,715 --> 00:05:34,950 So all the files with the extension.SCSS will be 62 00:05:34,950 --> 00:05:41,960 converted and the corresponding.CSS files will be generated by this node-sass.module. 63 00:05:42,270 --> 00:05:47,450 Let's save the changes and then we'll go to the command prompt and then type 64 00:05:47,450 --> 00:05:54,310 in npm run SCSS and this will take care of doing our conversion. 65 00:05:54,310 --> 00:05:56,500 Going to the command prompt, 66 00:05:56,500 --> 00:06:02,005 we'll type npm run SCSS and this should 67 00:06:02,005 --> 00:06:09,795 automatically convert all our SCSS files into the corresponding CSS files. 68 00:06:09,795 --> 00:06:11,905 Going to our editor, 69 00:06:11,905 --> 00:06:16,525 you now see that there is a styles.css files that has been generated. 70 00:06:16,525 --> 00:06:18,530 Looking at the content of this file, 71 00:06:18,530 --> 00:06:25,000 you will see that this CSS code that has been generated from our SCSS code is pretty much 72 00:06:25,000 --> 00:06:32,050 the same as the original CSS code that we wrote ourselves. 73 00:06:32,050 --> 00:06:35,875 With this, we complete this exercise. 74 00:06:35,875 --> 00:06:40,220 In this exercise, we saw how we can write 75 00:06:40,220 --> 00:06:48,195 SCSS code and then automatically convert that into their corresponding CSS code. 76 00:06:48,195 --> 00:06:53,115 The reason why we examine this in detail is because 77 00:06:53,115 --> 00:06:59,190 Bootstrap provides its source files in SCSS format. 78 00:06:59,190 --> 00:07:02,370 If you visit the Bootstrap page, 79 00:07:02,370 --> 00:07:11,795 you will notice that it says Bootstrap is designed using the Sass preprocessor. 80 00:07:11,795 --> 00:07:19,745 So, if you look at how this is converted from Sass 81 00:07:19,745 --> 00:07:23,475 and how you can do your own customization 82 00:07:23,475 --> 00:07:28,115 using the Bootstrap Sass code you can go into the documentation, 83 00:07:28,115 --> 00:07:32,025 and then you would see under 84 00:07:32,025 --> 00:07:37,610 "Options" you will have some customization options being defined here. 85 00:07:39,630 --> 00:07:43,800 Various customization options you can see that 86 00:07:43,800 --> 00:07:49,780 these variables are all defined using the Sass syntax here, 87 00:07:49,780 --> 00:07:53,460 and also under "Build tools", 88 00:07:53,460 --> 00:08:00,455 it'll explain to you how you can do your own customization of Bootstrap. 89 00:08:00,455 --> 00:08:05,330 Now, I would strongly recommend you not to try this until you have 90 00:08:05,330 --> 00:08:10,515 sufficient experience using Bootstrap in your daily life. 91 00:08:10,515 --> 00:08:12,784 This completes our exercise. 92 00:08:12,784 --> 00:08:21,250 This may be a good time for you to do a good commit with the message exercise SCSS.