1
00:00:03,290 --> 00:00:09,780
It's time to move on to the next exercise, called Exercise: Less.

2
00:00:09,780 --> 00:00:12,860
Something that you wish your doctor

3
00:00:12,860 --> 00:00:16,380
will tell you when you visit him or her the next time.

4
00:00:16,380 --> 00:00:25,515
Nevertheless, let's examine less in more detail now to understand how we can define

5
00:00:25,515 --> 00:00:31,830
CSS classes using the less preprocessor syntax and then

6
00:00:31,830 --> 00:00:38,725
automatically generate the corresponding CSS classes from our less classes.

7
00:00:38,725 --> 00:00:42,630
To get started, let's go to

8
00:00:42,630 --> 00:00:51,865
our project in the Text Editor and then inside the CSS folder,

9
00:00:51,865 --> 00:00:58,750
I'm going to rename this styles.css file as styles-old.css.

10
00:00:58,750 --> 00:01:03,870
I'm going to save my current version of the

11
00:01:03,870 --> 00:01:08,685
styles.css file because now they will write less code

12
00:01:08,685 --> 00:01:13,200
and SCSS code and then automatically generate the

13
00:01:13,200 --> 00:01:19,165
styles.css file by compiling these CSS preprocessor languages.

14
00:01:19,165 --> 00:01:23,300
After doing this, then in my CSS folder,

15
00:01:23,300 --> 00:01:31,280
we'll create a new file named styles.less.

16
00:01:32,070 --> 00:01:37,290
And inside here, I will define my less code.

17
00:01:37,290 --> 00:01:41,800
Let's first define some less variables.

18
00:01:41,800 --> 00:01:52,420
I'll say, lt-gray: ddd and so on.

19
00:01:52,420 --> 00:01:57,980
You can see that I have added in a few more less variables here.

20
00:01:57,980 --> 00:02:02,310
So, I defined background dark to be first value,

21
00:02:02,310 --> 00:02:05,850
background light and background pale and also

22
00:02:05,850 --> 00:02:11,235
one more variable called carousel-item-height as 300 pixel.

23
00:02:11,235 --> 00:02:17,305
I'm going to make use of these variables when I define my CSS classes later.

24
00:02:17,305 --> 00:02:22,995
Let me now add in a Mixin for

25
00:02:22,995 --> 00:02:31,130
my less file called zero-margin and I will define pad-up-dn

26
00:02:41,320 --> 00:02:48,760
and pad-left-right,

27
00:02:48,760 --> 00:02:55,725
0px being the default value and then in here,

28
00:02:55,725 --> 00:03:01,620
I set margin: 0px auto,

29
00:03:01,620 --> 00:03:11,520
padding: pat-up-dn

30
00:03:11,520 --> 00:03:14,460
and pad-left-right.

31
00:03:14,460 --> 00:03:20,180
So with this, I have defined the Mixin that I'm going to

32
00:03:20,180 --> 00:03:25,785
make use of in my CSS classes that we'll define later.

33
00:03:25,785 --> 00:03:31,265
And this carries two parameters pad-up-dn and pad-left-right.

34
00:03:31,265 --> 00:03:39,740
Next, I will add in a few more CSS classes so I start out with

35
00:03:39,740 --> 00:03:50,435
row-header and define this as zero-margin.

36
00:03:50,435 --> 00:03:57,560
Let me add in a few more CSS classes and then come back to have a look at them.

37
00:03:57,560 --> 00:04:01,170
Here, I have defined yet another CSS class

38
00:04:01,170 --> 00:04:06,480
using the zero-margin Mixin with the parameters 50 pixel and 0 pixel,

39
00:04:06,480 --> 00:04:10,790
a footer where I define the background color using

40
00:04:10,790 --> 00:04:15,660
the variable that have defined earlier as

41
00:04:15,660 --> 00:04:19,940
background-pale and then jumbotron with

42
00:04:19,940 --> 00:04:25,885
the zero-margin Mixin and the background color defined as background-light,

43
00:04:25,885 --> 00:04:30,200
and some of these other ones which are standard CSS classes,

44
00:04:30,200 --> 00:04:34,610
which I've included there because I'm going to make use of them in

45
00:04:34,610 --> 00:04:38,010
my web page and then you have

46
00:04:38,010 --> 00:04:42,850
navbar-dark for which the background color I did define us background-dark.

47
00:04:42,850 --> 00:04:46,980
And the tab-content for which again you see me

48
00:04:46,980 --> 00:04:51,820
using the variable light gray for the border color here.

49
00:04:51,820 --> 00:04:58,700
Next, I add in the carousel class here for which I define

50
00:04:58,700 --> 00:05:06,010
the background as background-dark here and then,

51
00:05:06,010 --> 00:05:10,540
I define that carousel-item.

52
00:05:10,540 --> 00:05:18,225
Note, how I define that as a nested item inside my carousel and for the carousel-item,

53
00:05:18,225 --> 00:05:24,225
I define the height as carousel-item-height here,

54
00:05:24,225 --> 00:05:28,965
which is a variable that I defined earlier and inside there,

55
00:05:28,965 --> 00:05:31,005
I define the image,

56
00:05:31,005 --> 00:05:36,635
which is again yet another nested item inside the carousel-item and then for the image,

57
00:05:36,635 --> 00:05:40,010
I will define some CSS properties next.

58
00:05:40,010 --> 00:05:42,650
As you can see,

59
00:05:42,650 --> 00:05:46,200
I have defined some properties for the image.

60
00:05:46,200 --> 00:05:50,950
Here, you see the use of nested classes here,

61
00:05:50,950 --> 00:05:55,305
so you have carousel and inside that I have a carousel-item and inside that,

62
00:05:55,305 --> 00:05:57,145
an image defined here.

63
00:05:57,145 --> 00:05:58,945
Finally at the bottom,

64
00:05:58,945 --> 00:06:02,075
I add in the carouselButton class,

65
00:06:02,075 --> 00:06:07,605
which is used for specifying the carouselButton.

66
00:06:07,605 --> 00:06:14,935
With this changes to my styles.less file adding in all the less classes here,

67
00:06:14,935 --> 00:06:16,465
let me save the changes.

68
00:06:16,465 --> 00:06:23,230
Now, I want to be able to automatically convert this into their corresponding CSS file.

69
00:06:23,230 --> 00:06:28,875
To automatically convert my less file into its corresponding CSS file,

70
00:06:28,875 --> 00:06:32,660
I'm going to make use of a node module called as less.

71
00:06:32,660 --> 00:06:35,015
To install that at the prompt,

72
00:06:35,015 --> 00:06:41,085
I type sudo npm install minus g less.

73
00:06:41,085 --> 00:06:47,150
I install this as a global node module.

74
00:06:47,150 --> 00:06:54,555
And once that is installed,

75
00:06:54,555 --> 00:07:01,985
then it'll make available a less compiler called as lessc at the command prompt.

76
00:07:01,985 --> 00:07:04,570
If you are running this on a Windows machine,

77
00:07:04,570 --> 00:07:06,130
you don't need to do sudo,

78
00:07:06,130 --> 00:07:09,900
as you probably already recall.

79
00:07:09,900 --> 00:07:14,565
Now that we have installed the lessc compiler,

80
00:07:14,565 --> 00:07:21,010
I'm going to compile my less code into its corresponding CSS code.

81
00:07:21,010 --> 00:07:26,290
To do that, let me go into the CSS folder and then here,

82
00:07:26,290 --> 00:07:29,650
you will see that you have the styles.less file.

83
00:07:29,650 --> 00:07:38,909
At the prompt, type lessc styles.less styles.css,

84
00:07:38,909 --> 00:07:43,010
and once that completes the compilation,

85
00:07:43,010 --> 00:07:45,580
you will have the corresponding CSS file.

86
00:07:45,580 --> 00:07:47,580
So as you see now,

87
00:07:47,580 --> 00:07:53,565
you have the less code being converted into the corresponding CSS code.

88
00:07:53,565 --> 00:07:59,310
Taking a look at the generated CSS code from the less code,

89
00:07:59,310 --> 00:08:02,910
you would see that this code looks pretty much the

90
00:08:02,910 --> 00:08:08,075
same as what we defined in our original CSS file.

91
00:08:08,075 --> 00:08:11,270
With this, we complete this exercise.

92
00:08:11,270 --> 00:08:15,515
In this exercise, we have learnt how to write

93
00:08:15,515 --> 00:08:21,525
less code and then automatically convert that into the corresponding CSS code.

94
00:08:21,525 --> 00:08:26,155
At this point, you may wish to save the changes

95
00:08:26,155 --> 00:08:32,410
to your Git repository with the message Exercise: Less.