‫Hey, there.
‫Welcome back.
‫Now let's talk about make sense.
‫Don't worry if you don't understand this topic, it's pretty early, to be honest as a beginner.
‫This is heavy topic and I strongly recommend if you are not able to understand this point, it's OK.
‫You can understand about us later.
‫Maybe after completing all legitimate cases, after making your own project self-critique, understanding
‫about the programming language and then coming back to fast at something confusing.
‫OK, let's after this whole disclaimer, let's get back to our topic.
‫So what are these mix ins and why they are going to give super power to our task at this point of time?
‫We are trying to extend only common things, common things that are equal.
‫That means the values equal for all of them.
‫That means if I'm extending this founding, this will be one of them here.
‫So this will be one of them here when I'm here and then it sell.
‫And you can see why, because we are extending them as a common pattern.
‫You get it right.
‫But what if I need to utilize these common properties, but I want different value for different item,
‫maybe for item one, I need one item, do I need to them?
‫Item three I need denim item for I need freedom, something like this.
‫So in that case, we utilize mix ins.
‫So basically what we can do is we can say mixing and then give it a name and then we can define all
‫the common properties.
‫Now, if we have anything specific in terms of color and everything, we can define that.
‫Now this is important when we want to import some common properties on multiple items and want something
‫different for each one of them.
‫So something similar, we are going to do it there.
‫So for example, what I'm going to do is I'm going to come in this everything later.
‫You can access this whole or.
‫For an extended example, but I'm going to copy and come in, you can utilize control and slash together
‫to comment all of them.
‫Now this example is what extent, but here we are going to play.
‫It makes sense now.
‫Now what I'm going to do is I'm going to utilize Addre makes it simple thing.
‫I'm here.
‫Let me provide a name to our mixing letter item property itself.
‫So I'm going to call this as item properties and help you see this whole bracket thing.
‫This is important.
‫So let's take this bracket and I'm going to call this out.
‫Dollar going to basically, I'm creating a variable color.
‫OK, looks fine.
‫Looks good to me.
‫But let me take this common property and it here and remove this item property.
‫Now I'm going to play with this whole background thing, but before that, let me remove this extent
‫because we are not going to walk with any type of inheritance now, so I'm going to remove this and
‫what I'm going to do is I'm going to work with this background property for all of them.
‫So let's say this as here I'm going to add a field as background, and I'm going to call this as.
‫OK, so let me remove this background so I don't need this background property for all of them.
‫What I'm going to do is I'm going to drive.
‫I just need to import this mix in.
‫So I'm just going to include my mix, and I'm going to say include.
‫Head, I need to give it to a name that as I'm property.
‫Copy this one.
‫And I just need to pass devalue about the color.
‫So let's say this is my color.
‫Copy this one, paste it here, and I need to remove this background.
‫OK, save.
‫Now, what is going to happen behind the scenes?
‫We have this whole mixing.
‫We are going to include it here.
‫And whenever I'm going to include it, it is going to call this mixing with this color value.
‫This is color values going here and then this color values going in.
‫So basically, we passed this color value.
‫It is going to travel here and then it is going to travel inside it.
‫So for an item to this is our color value.
‫Now, if I save this one, jump back here into our style, our CIUSSS jump onto our item two.
‫You can see our branding is one on this.
‫15.
‫This is border.
‫Okay, great.
‫All the common properties are included.
‫What if you see this bag grown?
‫Four, nine, five five six.
‫Here you can see background four, nine five five six eight.
‫That is included because of this mixing, let's do some more fun, let's try to extend it here.
‫Let's try to do this with Adaora as well.
‫Let me included everywhere.
‫And I remember I need to change color for all of them, so I'm going to take this.
‫And I can remove this background itself.
‫Similarly pragmatic itself.
‫Now here we have a background image, so I'm just going to remove this color only.
‫OK, great.
‫Let me save this one.
‫You can see we have this pop up right click close this one now, if you observe on this side, you have
‫this background, we have this background as well as the other properties.
‫So in this way, we are able to include all the common properties, as well as the properties that require
‫some different variables, different color.
‫Now we can play with other content as well.
‫Suppose I need foreign sites different for all of them or maybe change the color.
‫I can do that.
‫For example, let's change foreign sites for all of them.
‫So what I'm going to do is I'm going to add up all my hair and just include a new variable.
‫Let me call this as if that is going to be a foreign site.
‫And let's say this has 15 pixels.
‫And remember, I'm going to limit my.
‫Item one.
‫OK.
‫I still need to open this so we can see the change here.
‫So here I have a first 15 picks, and let me copy this episode.
‫This episode is going on here.
‫Let me add my hair and then this emphasis going here.
‫So let's say this now, once I save, this will be changed.
‫So if I save this one, OK, not because that's 15 pixel.
‫OK, great.
‫Let's try it others.
‫Let's take 16 picks in here.
‫I haven't saved it yet, remember?
‫So if I take 16 pixel here it is going on are mixing with our efforts and then it is going to be 16
‫pixel.
‫OK.
‫Hit it 16.
‫And her grandkids 15.
‫Now, if I save this one, you can say it is not working, you can see we got an error.
‫And this is the place when this order is going to walk, you can see we got an error.
‫The error is that we are passing 16 picks into 14 item one, but we haven't provided any value for that
‫item.
‫So what will be the value for other items?
‫Because we have only five 16 pixels for first item, but what will be the value of other items so we
‫can hear Ranger a default value?
‫Let's say default value has 15 percent.
‫So if we are providing a value, then it will be taking this value.
‫Otherwise, this will take default value for others.
‫So, for example, here we haven't provided value for a phone size.
‫It will take 15 percent, but here we have provided 16.
‫It will take 16 pixel.
‫Now, if you absorb the change, I don't want a 16 pixel.
‫But for other items, we haven't provided any value simplicity.
‫15.
‫Now let's dig and provide value for others.
‫Let me copy this one out of 10.
‫And let's say 20.
‫I haven't saved it.
‫Remember, I haven't saved it yet.
‫And here you can see it's 15.
‫So as soon as I save this, you can see it's changed.
‫Now, I had one important thing, this value goes here and what I did, and then it moved here.
‫So basically, if you know, if you have a knowledge about programming, we work with functions, argument
‫parameters.
‫So it's basically that if you are not aware of this, don't worry, you will know once you grow that
‫the basic example, because it's a nuanced topic, to be honest.
‫That's it.
‫Now you can play with others if you want.
‫So that's the whole ball boys off makes sense.
‫This give you a superpower to play with something like this, which you can not imagine what can with
‫normal CFS?
‫There are few are that advanced concept that I really don't want to cover as a big note, get some knowledge
‫about programming language, walk with maybe JavaScript, bite on it, any other language and then get
‫back to fast because understanding our function, understanding about other things in a programming
‫language is much easier than understanding it.
‫So that's it for makes sense.
‫The other topic is operators.
‫And I don't want to cover this in form of a lecture because it's pretty easy.
‫So for example, if we have a rate of 100 percent, we can provide something like addition, subtraction,
‫multiplication division as well as percentage with the help of these values.
‫So I can say 100 minus 50 and it will give me a result of 50.
‫That's how I can pass different values with the help of operator.
‫If you try to do this with the SS, you are going to get in and an audit is not going to work, but
‫we can utilize these operator with whole SC assisting, for example.
‫Let me take a quick example.
‫Let's say you want to pass this one to a lower price 600.
‫Let me pass plus hundred and if I save this one.
‫Jump on to my stylus, yes.
‫I jump on to title now.
‫You can see at seven and now.
‫So at 600+ under, so that's how this is going to up.
‫I hope you are the basic idea how you can do multiple calculation and that is going to work well.
‫I mean, we can play with other things, let's say one plus three, the same this one.
‫And if I jump on to our style or CC, jump on to name thing, you can search for them.
‫OK, I hope you got the idea how these operators are going to work.
‫So that's all about the SAS as a beginner.
‫I hope you got the idea.
‫We try to discuss everything in detail.
‫Also with the example, I hope this last session was helpful.
‫All the best for future.
‫Thank you for calling and I see you guys in the next one.