1
00:00:02,370 --> 00:00:06,700
Now that we learned how we can improve our code with the easier media queries,

2
00:00:06,720 --> 00:00:10,500
let's have a look at the inheritance and what this actually means.

3
00:00:10,620 --> 00:00:17,250
Inheritance means that if you got a certain ruleset for a given selector which you also want to

4
00:00:17,250 --> 00:00:21,940
use on a different selector, then you can simply inherit from this selector.

5
00:00:21,960 --> 00:00:23,860
Let me show you how this works.

6
00:00:24,090 --> 00:00:30,090
If you have a look at sass-introduction and sass-details, they're very similar.

7
00:00:30,090 --> 00:00:32,580
Both have a border, border default,

8
00:00:32,580 --> 00:00:34,820
both have this background color,

9
00:00:34,860 --> 00:00:36,660
both have this padding,

10
00:00:36,660 --> 00:00:38,820
both have text align center,

11
00:00:38,910 --> 00:00:47,300
both have the width and the box sizing, only the box shadow on the sass-introduction is the difference

12
00:00:47,370 --> 00:00:50,500
and on sass-details, we got that margin.

13
00:00:50,550 --> 00:00:54,680
So what we could do is, we could create a new class of course

14
00:00:55,820 --> 00:01:03,430
which we simply name sass-section where we group all the shared features,

15
00:01:03,560 --> 00:01:05,980
so the text alignment and so on

16
00:01:06,170 --> 00:01:14,800
and then the width and the box sizing and also the media query which is the same, like this.

17
00:01:14,940 --> 00:01:22,800
Now sass-introduction is just a box shadow, sass-details also can get rid of the first four properties,

18
00:01:22,920 --> 00:01:26,020
we'll leave the margin but we can get rid of the rest.

19
00:01:26,310 --> 00:01:32,700
For this to work correctly, we now just need to ensure that we also add sass-section to the places where

20
00:01:32,700 --> 00:01:35,580
we use sass-introduction and sass-details.

21
00:01:35,610 --> 00:01:42,980
So let's go back to the index.html file and let's actually add sass-section to the section class or

22
00:01:42,980 --> 00:01:48,900
the section with the class sass-details and to the one with sass-introduction. If we save all files and we

23
00:01:48,900 --> 00:01:53,000
reload the page, we should get the same result as before,

24
00:01:53,610 --> 00:02:00,330
however this now meant that we had to add both classes here. This is a bit error-prone since we can forget

25
00:02:00,330 --> 00:02:01,350
this,

26
00:02:01,350 --> 00:02:03,500
so let's remove this actually

27
00:02:03,540 --> 00:02:11,430
and let's go back to main.scss, so an easier way we can use when using SASS is we can inherit

28
00:02:11,700 --> 00:02:14,440
from this sass-section class.

29
00:02:14,720 --> 00:02:18,740
This is done by using the @extend directive as it's called,

30
00:02:18,750 --> 00:02:22,390
this is not a normal CSS feature but a SASS-only feature

31
00:02:22,560 --> 00:02:26,160
and here, we simply define a class from which we want to inherit,

32
00:02:26,520 --> 00:02:37,740
in our case, sass-section like this. We do the same in sass-details and if you save this and reload, you

33
00:02:37,750 --> 00:02:40,180
again get the same result as before,

34
00:02:40,180 --> 00:02:43,920
even though keep in mind, we removed the sass-section here.

35
00:02:43,960 --> 00:02:51,220
The reason is that inheritance is the default for us. It created this new ruleset where sass-section,

36
00:02:51,220 --> 00:02:58,840
sass-introduction and sass-details share the same set of common rules and then we got our more specialized

37
00:02:58,840 --> 00:03:02,530
sets of rules for sass-introduction and sass-details.

38
00:03:02,530 --> 00:03:07,390
Now you can do more with inheritance and you can read all about that by clicking on that inheritance

39
00:03:07,390 --> 00:03:08,650
link here

40
00:03:08,650 --> 00:03:16,450
but this is of course a very cool feature that ensures that you can easily set up shared styles and

41
00:03:16,630 --> 00:03:23,820
use or add them to any other classes you get without manually having to take care that you implement that

42
00:03:23,830 --> 00:03:26,450
shared class in your HTML code,

43
00:03:26,650 --> 00:03:31,400
Instead you keep your specialized classes and simply let SASS do the rest.