Now that we learned how we can improve our code with the easier media queries,
let's have a look at the inheritance and what this actually means.
Inheritance means that if you got a certain ruleset for a given selector which you also want to
use on a different selector, then you can simply inherit from this selector.
Let me show you how this works.
If you have a look at sass-introduction and sass-details, they're very similar.
Both have a border, border default,
both have this background color,
both have this padding,
both have text align center,
both have the width and the box sizing, only the box shadow on the sass-introduction is the difference
and on sass-details, we got that margin.
So what we could do is, we could create a new class of course
which we simply name sass-section where we group all the shared features,
so the text alignment and so on
and then the width and the box sizing and also the media query which is the same, like this.
Now sass-introduction is just a box shadow, sass-details also can get rid of the first four properties,
we'll leave the margin but we can get rid of the rest.
For this to work correctly, we now just need to ensure that we also add sass-section to the places where
we use sass-introduction and sass-details.
So let's go back to the index.html file and let's actually add sass-section to the section class or
the section with the class sass-details and to the one with sass-introduction. If we save all files and we
reload the page, we should get the same result as before,
however this now meant that we had to add both classes here. This is a bit error-prone since we can forget
this,
so let's remove this actually
and let's go back to main.scss, so an easier way we can use when using SASS is we can inherit
from this sass-section class.
This is done by using the @extend directive as it's called,
this is not a normal CSS feature but a SASS-only feature
and here, we simply define a class from which we want to inherit,
in our case, sass-section like this. We do the same in sass-details and if you save this and reload, you
again get the same result as before,
even though keep in mind, we removed the sass-section here.
The reason is that inheritance is the default for us. It created this new ruleset where sass-section,
sass-introduction and sass-details share the same set of common rules and then we got our more specialized
sets of rules for sass-introduction and sass-details.
Now you can do more with inheritance and you can read all about that by clicking on that inheritance
link here
but this is of course a very cool feature that ensures that you can easily set up shared styles and
use or add them to any other classes you get without manually having to take care that you implement that
shared class in your HTML code,
Instead you keep your specialized classes and simply let SASS do the rest.