Beyond the extend instruction, there is also the mixing instruction, this instruction has the aim
of representing a series of properties inside selectors, which we are calling fictitious to recall
then the same properties into actual selectors, associating them with a predefined value.
Let's see better how to make mixin be represented so that the explanation may be smooth to you, because
I'm aware that visualizing this type of instruction is much easier than instead following an explanation.
Let's create a fictitious selector starting with mixing.
We are calling the selector margin.
We are then opening a bracket inside which to insert then the name of the variable in this case value
that's open at this point, the selector inside it, inserting the properties we want that the margin
property with which we are associating value.
And the padding property.
With which we are associate and again, value in this moment, we have created a fictitious collector
with a variable which doesn't have a set value like before, to be able to associate the value with
these properties, we have to get into the chosen selectors, in this case high, middle and low.
To recall this selector with mixin to do so, we have to insert include at include the name.
Then Margine.
After that, within brackets, we have to insert the value we want to add in our case, 10 pixels that's
close and we have this way inserted into hi the relative properties to margin and padding by associating
the 10 pixel value when saving.
You see that our system date process and inside stays below high seat margin, 10 pixels and padding
and pixels.
We can repeat the same operation inserted in middle and low to the same values.
And therefore, we will find a new margin and the new padding to all our expenses, obviously by checking
our result, we see that all our classes have got margin and padding associate and therefore they won't
be sitting in the same place anymore.
We can also choose to change a value, therefore, if we insert 20 as value of we don't automatically
inside thigh high would still output 10 pizzas, whereas middle would output 20 and automatically the
result would be updated as improvement is now sitting further away from the top, from the left and
from the bottom compared to the previous ones.
So mixing is a sort of evolution on the variables, permitting us to associate with the same variable
in certain, though in this fictitious selecter, a different value according to the destination selector.