It's time to move on to the next exercise, called Exercise: Less. Something that you wish your doctor will tell you when you visit him or her the next time. Nevertheless, let's examine less in more detail now to understand how we can define CSS classes using the less preprocessor syntax and then automatically generate the corresponding CSS classes from our less classes. To get started, let's go to our project in the Text Editor and then inside the CSS folder, I'm going to rename this styles.css file as styles-old.css. I'm going to save my current version of the styles.css file because now they will write less code and SCSS code and then automatically generate the styles.css file by compiling these CSS preprocessor languages. After doing this, then in my CSS folder, we'll create a new file named styles.less. And inside here, I will define my less code. Let's first define some less variables. I'll say, lt-gray: ddd and so on. You can see that I have added in a few more less variables here. So, I defined background dark to be first value, background light and background pale and also one more variable called carousel-item-height as 300 pixel. I'm going to make use of these variables when I define my CSS classes later. Let me now add in a Mixin for my less file called zero-margin and I will define pad-up-dn and pad-left-right, 0px being the default value and then in here, I set margin: 0px auto, padding: pat-up-dn and pad-left-right. So with this, I have defined the Mixin that I'm going to make use of in my CSS classes that we'll define later. And this carries two parameters pad-up-dn and pad-left-right. Next, I will add in a few more CSS classes so I start out with row-header and define this as zero-margin. Let me add in a few more CSS classes and then come back to have a look at them. Here, I have defined yet another CSS class using the zero-margin Mixin with the parameters 50 pixel and 0 pixel, a footer where I define the background color using the variable that have defined earlier as background-pale and then jumbotron with the zero-margin Mixin and the background color defined as background-light, and some of these other ones which are standard CSS classes, which I've included there because I'm going to make use of them in my web page and then you have navbar-dark for which the background color I did define us background-dark. And the tab-content for which again you see me using the variable light gray for the border color here. Next, I add in the carousel class here for which I define the background as background-dark here and then, I define that carousel-item. Note, how I define that as a nested item inside my carousel and for the carousel-item, I define the height as carousel-item-height here, which is a variable that I defined earlier and inside there, I define the image, which is again yet another nested item inside the carousel-item and then for the image, I will define some CSS properties next. As you can see, I have defined some properties for the image. Here, you see the use of nested classes here, so you have carousel and inside that I have a carousel-item and inside that, an image defined here. Finally at the bottom, I add in the carouselButton class, which is used for specifying the carouselButton. With this changes to my styles.less file adding in all the less classes here, let me save the changes. Now, I want to be able to automatically convert this into their corresponding CSS file. To automatically convert my less file into its corresponding CSS file, I'm going to make use of a node module called as less. To install that at the prompt, I type sudo npm install minus g less. I install this as a global node module. And once that is installed, then it'll make available a less compiler called as lessc at the command prompt. If you are running this on a Windows machine, you don't need to do sudo, as you probably already recall. Now that we have installed the lessc compiler, I'm going to compile my less code into its corresponding CSS code. To do that, let me go into the CSS folder and then here, you will see that you have the styles.less file. At the prompt, type lessc styles.less styles.css, and once that completes the compilation, you will have the corresponding CSS file. So as you see now, you have the less code being converted into the corresponding CSS code. Taking a look at the generated CSS code from the less code, you would see that this code looks pretty much the same as what we defined in our original CSS file. With this, we complete this exercise. In this exercise, we have learnt how to write less code and then automatically convert that into the corresponding CSS code. At this point, you may wish to save the changes to your Git repository with the message Exercise: Less.
