We'll now move on to the next exercise, where we will use SCSS syntax to define our SCSS classes and automatically convert them into their corresponding CSS classes. We'll be doing exactly the same set of steps that we did for the last exercise that we completed just now, but using the SCSS syntax. To get started, in your project in the CSS folder, let's create a new file and name it as style start SCSS. Now in this file we'll define our SCSS classes and then automatically convert that into our CSS classes. So in there, let's start out by first defining the variables, so I'll start out with light gray, I have now added in a few more variables here again with the same names as we used in the last exercise earlier, but with the SCSS syntax so all the variables are preceded with the dollar sign to define them as variables. Next will define the mixin. So for the mixin, I would say mixin zero-margin, pad-up-down, pad-left-right, and we define the values as before. Now that we have completed defining the mixin, we can make use of it in our SCSS classes that we define later. Let's now define some SCSS classes, so I'll define the row header which I will make use of the zero margin mixin with the values zero pixel here. We'll continue to define a few more classes that they will add in here, so you can see that I have defined along with the row header and the row content where I used the mixins and the footer and Jumbotron address and so on, and you can see the use of the variables that we have defined earlier in this example there. The code obviously is available in the exercise instructions that follow this video. Next we will add in if you nesting classes. Just like we did in the last exercise, we'll add in the carousel class with the background set to background dark and then inside where we'll nest a carousel item class with the height set to carousel item height, and then another inner class colors image with some properties there, and then the carousel button class as we defined earlier. So with this, we have made the changes to our SCSS classes, so let's save the changes. Now, we need to convert this into its corresponding CSS file. To convert our SCSS source code into the corresponding CSS code, we're going to take the help of yet another node module called node-sass. Lets install the node module by typing npm install save dev--save dev and then node-sass. So this way, we will save this node-sass package as a development dependency in our package.json file. Once the installation is complete, we're going to add in a script into our package.json file. Going to our package.json file, if you scroll up you would see that in the dev dependencies, now the node-sass is also added into the dev dependencies. We'll now add a script into our package.jsm file, so right half of this slide, I'm going to add in a script named SCSS and then this script will be node-sass -o CSS/, meaning that the output of this the converted files will be in the CSS folder, and the source here will also be in the CSS folder. So all the files with the extension.SCSS will be converted and the corresponding.CSS files will be generated by this node-sass.module. Let's save the changes and then we'll go to the command prompt and then type in npm run SCSS and this will take care of doing our conversion. Going to the command prompt, we'll type npm run SCSS and this should automatically convert all our SCSS files into the corresponding CSS files. Going to our editor, you now see that there is a styles.css files that has been generated. Looking at the content of this file, you will see that this CSS code that has been generated from our SCSS code is pretty much the same as the original CSS code that we wrote ourselves. With this, we complete this exercise. In this exercise, we saw how we can write SCSS code and then automatically convert that into their corresponding CSS code. The reason why we examine this in detail is because Bootstrap provides its source files in SCSS format. If you visit the Bootstrap page, you will notice that it says Bootstrap is designed using the Sass preprocessor. So, if you look at how this is converted from Sass and how you can do your own customization using the Bootstrap Sass code you can go into the documentation, and then you would see under "Options" you will have some customization options being defined here. Various customization options you can see that these variables are all defined using the Sass syntax here, and also under "Build tools", it'll explain to you how you can do your own customization of Bootstrap. Now, I would strongly recommend you not to try this until you have sufficient experience using Bootstrap in your daily life. This completes our exercise. This may be a good time for you to do a good commit with the message exercise SCSS.
