1
00:00:00,000 --> 00:00:04,466
[MUSIC]

2
00:00:04,466 --> 00:00:08,813
This particular lesson deals
with CSS preprocessors,

3
00:00:08,813 --> 00:00:11,880
in particular Less and Sass.

4
00:00:11,880 --> 00:00:17,420
Now obviously,
these topics have more to do with CSS and

5
00:00:17,420 --> 00:00:22,680
defining CSS classes, but
it would be inappropriate for

6
00:00:22,680 --> 00:00:26,940
me to complete a Bootstrap course without

7
00:00:26,940 --> 00:00:31,010
delving a little bit
into CSS preprocessors.

8
00:00:31,010 --> 00:00:37,265
Simply because Bootstrap is
built using Sass for its source.

9
00:00:37,265 --> 00:00:41,970
So, we'll briefly examine
CSS preprocessors,

10
00:00:41,970 --> 00:00:47,682
what they are, how they are useful
in defining CSS classes,

11
00:00:47,682 --> 00:00:51,166
and why Bootstrap makes use of them.

12
00:00:52,972 --> 00:00:58,263
As you probably understand from
your previous experience with CSS,

13
00:00:58,263 --> 00:01:00,997
CSS is great for defining styles and

14
00:01:00,997 --> 00:01:06,325
repeatedly applying these styles
to various HTML elements.

15
00:01:06,325 --> 00:01:11,940
And that's the way we use CSS
when we define our web pages.

16
00:01:11,940 --> 00:01:15,080
But when you look at the CSS code itself,

17
00:01:15,080 --> 00:01:19,620
you begin to quickly realize
the limitations of CSS.

18
00:01:19,620 --> 00:01:23,660
Especially if you are coming from
a programming background, you realize that

19
00:01:23,660 --> 00:01:29,342
CSS doesn't have what you typically expect
in a programming language, like variables,

20
00:01:29,342 --> 00:01:34,610
nesting of selectors, variables,
expressions, and functions.

21
00:01:36,310 --> 00:01:40,580
This means that writing CSS
code becomes cumbersome, and

22
00:01:40,580 --> 00:01:44,370
maintaining CSS code becomes
cumbersome because of

23
00:01:44,370 --> 00:01:49,550
lack of the traditional
programming language-like syntax.

24
00:01:49,550 --> 00:01:54,770
Now, this is where the CSS
preprocessors come to our rescue.

25
00:01:55,800 --> 00:02:01,090
There are several popular CSS
preprocessors that try to address some of

26
00:02:01,090 --> 00:02:07,290
the shortcomings of CSS by
supporting many of these features.

27
00:02:07,290 --> 00:02:13,000
Two in particular that is of
interest to us is Less and Sass.

28
00:02:14,840 --> 00:02:19,940
We will look at these two in
more detail in this lesson.

29
00:02:19,940 --> 00:02:24,744
Now, when you define your
CSS classes using one

30
00:02:24,744 --> 00:02:29,760
of these preprocessor
languages like Less or

31
00:02:29,760 --> 00:02:34,990
Sass, then they eventually
have to be converted into CSS,

32
00:02:34,990 --> 00:02:39,696
but this can be done automatically before
the CSS gets used in your web page.

33
00:02:39,696 --> 00:02:44,840
What these preprocessing
languages bring to us is

34
00:02:44,840 --> 00:02:51,580
more programming language-like syntax,
as we will see in the next few slides.

35
00:02:51,580 --> 00:02:53,620
We'll examine Less and Sass briefly.

36
00:02:54,990 --> 00:03:00,890
In particular, the reason for us to take
a look at this is because Bootstrap itself

37
00:03:00,890 --> 00:03:08,540
uses Sass for defining its source for
its CSS classes.

38
00:03:08,540 --> 00:03:12,980
And so
if you go into customizing Bootstrap,

39
00:03:12,980 --> 00:03:16,230
then you would have to
work with Sass code.

40
00:03:16,230 --> 00:03:21,402
Bootstrap 3, which was the preceding
version of Bootstrap, used Less,

41
00:03:21,402 --> 00:03:26,260
and hence, I thought it would be an
appropriate thing to cover both Less and

42
00:03:26,260 --> 00:03:32,330
Sass, because they are pretty
much similar to each other

43
00:03:32,330 --> 00:03:39,960
in terms of their capabilities and
the way the syntax is defined.

44
00:03:39,960 --> 00:03:45,630
The typical features that CSS
preprocessors bring is the support for

45
00:03:45,630 --> 00:03:53,340
variables, nesting selectors,
expressions, functions and mixins.

46
00:03:53,340 --> 00:03:59,580
So we will look at some of these with
some examples in the next few slides.

47
00:03:59,580 --> 00:04:02,270
The first thing that we'll
look at is variables.

48
00:04:02,270 --> 00:04:05,310
Now in many CSS classes that you define,

49
00:04:05,310 --> 00:04:11,540
you might have some repeated
use of certain quantities.

50
00:04:11,540 --> 00:04:16,600
It might be more worthwhile if
you define some variables that

51
00:04:16,600 --> 00:04:21,590
hold these quantities and use these
variables in defining your CSS classes.

52
00:04:21,590 --> 00:04:24,240
So that's where variables
come to your rescue.

53
00:04:24,240 --> 00:04:29,720
Here, we'll look at both Less and
Scss code.

54
00:04:29,720 --> 00:04:34,090
Scss is a version of Sass,

55
00:04:34,090 --> 00:04:40,670
more popular version of Sass syntax, so
that's why I concentrate on Scss here.

56
00:04:40,670 --> 00:04:43,420
So, if you define variables in Less,

57
00:04:43,420 --> 00:04:47,610
you will proceed the name of
the variable with an @ sign.

58
00:04:47,610 --> 00:04:55,720
In case of Scss, you will use a dollar
sign before the variable name.

59
00:04:55,720 --> 00:04:57,340
And once you define those variables,

60
00:04:57,340 --> 00:05:01,750
you can then use those variables
when you define the classes.

61
00:05:01,750 --> 00:05:06,700
As you see in the example, where we
define the navbar-inverse as background,

62
00:05:06,700 --> 00:05:11,410
or the carousel-item's
height as variables.

63
00:05:11,410 --> 00:05:16,350
Now, the advantage of defining variables
at the start of your CSS class

64
00:05:16,350 --> 00:05:21,400
is that there is a single point
where you can update a value, and

65
00:05:21,400 --> 00:05:27,390
it will automatically update all
the CSS classes that use this variable.

66
00:05:27,390 --> 00:05:31,080
Typically the way we use variables
in programming languages.

67
00:05:32,110 --> 00:05:38,340
Variables in the CSS preprocessor
languages can also have their own scope.

68
00:05:39,650 --> 00:05:44,510
Very often when you define CSS classes,
especially when you

69
00:05:44,510 --> 00:05:49,760
have to define classes that
are nested inside other classes,

70
00:05:49,760 --> 00:05:53,330
then, pretty soon your CSS
code gets very cumbersome.

71
00:05:53,330 --> 00:05:58,370
So this is where nesting is
supported by your CSS preprocessors.

72
00:05:58,370 --> 00:06:02,380
So as you can see, you can define for
example, a carousel class, and

73
00:06:02,380 --> 00:06:05,876
inside a carousel class,
you can define a carousel item class.

74
00:06:05,876 --> 00:06:11,900
And similarly, the image subclass
inside the carousel item class.

75
00:06:11,900 --> 00:06:18,161
So here you can see that each of
these is nested inside a prior class.

76
00:06:19,440 --> 00:06:25,410
With variables, you can hold one
value at a time in a variable.

77
00:06:25,410 --> 00:06:30,730
Suppose you have a group of
variables that summed up together

78
00:06:30,730 --> 00:06:37,275
declare a set of CSS declarations,
that is where we make use of mixins.

79
00:06:37,275 --> 00:06:42,910
In Less you define a mixin
by giving it a name,

80
00:06:42,910 --> 00:06:47,650
and and in Sass you simply
precede that with an @mixin in

81
00:06:47,650 --> 00:06:52,530
front of the name of
the mixin declaration.

82
00:06:52,530 --> 00:06:58,560
And inside a mixin,
you can define a bunch of CSS declarations

83
00:06:58,560 --> 00:07:03,620
that can then be reused for
various CSS classes.

84
00:07:03,620 --> 00:07:08,110
As you see in this example here,
we define the zero margin

85
00:07:08,110 --> 00:07:12,480
as a mixin, both in Less and Sass.

86
00:07:12,480 --> 00:07:18,120
Note the minor variation in
the syntax in each of those cases.

87
00:07:18,120 --> 00:07:25,250
And then, you can then use this mixin
in defining additional CSS classes.

88
00:07:25,250 --> 00:07:30,620
So here you can see that for the row
header, we define the zero margin as

89
00:07:30,620 --> 00:07:35,480
a mixin in the row header,
which means that all

90
00:07:35,480 --> 00:07:40,780
these properties from the zero margin will
be inherited by that row header class.

91
00:07:40,780 --> 00:07:47,320
Mixins themselves can take on additional
parameters if you so wish to define them.

92
00:07:47,320 --> 00:07:49,970
So in this case, I'm defining

93
00:07:49,970 --> 00:07:54,680
a variation of the zero margin mixin
that we saw in the previous slide.

94
00:07:54,680 --> 00:07:59,935
Here, this zero margin
mixin takes two parameters,

95
00:07:59,935 --> 00:08:03,011
pad up down and pad left right.

96
00:08:03,011 --> 00:08:08,840
And with Less, you can even
specify the default value for it,

97
00:08:08,840 --> 00:08:15,276
but with Scss you need to
explicitly specify the values.

98
00:08:15,276 --> 00:08:20,871
So here we are defining two different
CSS properties, the margin and

99
00:08:20,871 --> 00:08:27,880
padding, and then the padding itself
uses the parameters for our mixin there.

100
00:08:27,880 --> 00:08:32,300
So in that case,
you can use these mixins as you see in

101
00:08:32,300 --> 00:08:36,997
the two CSS classes defined
below the row header and

102
00:08:36,997 --> 00:08:41,810
the row content by specifying
their parameter values

103
00:08:41,810 --> 00:08:46,270
when you include that mixin
into your CSS cluster.

104
00:08:47,470 --> 00:08:52,570
Not only that, you can even perform
mathematical operations on predefined

105
00:08:52,570 --> 00:08:58,120
variables when you use them
inside your CSS classes.

106
00:08:58,120 --> 00:09:03,470
So here you can see that I have
defined two different carousel items

107
00:09:03,470 --> 00:09:05,740
with two different sizes, and so

108
00:09:05,740 --> 00:09:10,060
you can see that the heights of each
one of them is defined differently.

109
00:09:10,060 --> 00:09:15,105
In one case I'm using the predefined
height, in another case I

110
00:09:15,105 --> 00:09:20,244
am multiplying that height and
then using it to define the height

111
00:09:20,244 --> 00:09:25,230
property inside my carousel item for
the item-large class.

112
00:09:25,230 --> 00:09:28,778
So this kind of mathematical operations on

113
00:09:28,778 --> 00:09:33,710
variables is also allowed in
CSS preprocessor languages.

114
00:09:35,060 --> 00:09:40,160
Other features that the CSS
preprocessors include

115
00:09:40,160 --> 00:09:47,365
are functions that allow you to define
mathematical functions, Less strings.

116
00:09:47,365 --> 00:09:53,015
You can also do color operations and color
blending operations using these functions

117
00:09:53,015 --> 00:09:57,915
and make use of them when
you define your CSS classes.

118
00:09:57,915 --> 00:10:01,345
This is a bit advanced so I'm not
going into too much of detail there.

119
00:10:03,470 --> 00:10:11,552
Also, you can input predefined CSS
preprocessor classes into other classes.

120
00:10:11,552 --> 00:10:16,680
So for example,
if you've a Less class as defined, and

121
00:10:16,680 --> 00:10:20,100
you can input that file
into another Less file.

122
00:10:20,100 --> 00:10:23,347
Similarly, if you have defined Scss files,

123
00:10:23,347 --> 00:10:29,210
then you can import them into other
Scss files using the import operation.

124
00:10:29,210 --> 00:10:32,670
The syntax is the same for
both Less and Sass.

125
00:10:33,890 --> 00:10:40,180
Now that we have seen some features of
the CSS preprocessor languages, let's

126
00:10:40,180 --> 00:10:45,520
now examine how we can actually make use
of them by doing a couple of exercises.

127
00:10:45,520 --> 00:10:49,900
First, we'll do a exercise
based upon Less.

128
00:10:49,900 --> 00:10:53,677
Then we'll follow that up with
an exercise based on Sass.

129
00:10:53,677 --> 00:10:57,099
[MUSIC]