1 00:00:00,690 --> 00:00:01,260 ‫Hey, there. 2 00:00:01,410 --> 00:00:02,130 ‫Welcome back. 3 00:00:02,460 --> 00:00:04,410 ‫Now let's talk about make sense. 4 00:00:05,220 --> 00:00:10,470 ‫Don't worry if you don't understand this topic, it's pretty early, to be honest as a beginner. 5 00:00:10,590 --> 00:00:16,560 ‫This is heavy topic and I strongly recommend if you are not able to understand this point, it's OK. 6 00:00:16,980 --> 00:00:19,140 ‫You can understand about us later. 7 00:00:19,150 --> 00:00:26,190 ‫Maybe after completing all legitimate cases, after making your own project self-critique, understanding 8 00:00:26,190 --> 00:00:31,020 ‫about the programming language and then coming back to fast at something confusing. 9 00:00:31,770 --> 00:00:35,550 ‫OK, let's after this whole disclaimer, let's get back to our topic. 10 00:00:36,120 --> 00:00:43,260 ‫So what are these mix ins and why they are going to give super power to our task at this point of time? 11 00:00:43,650 --> 00:00:48,210 ‫We are trying to extend only common things, common things that are equal. 12 00:00:48,210 --> 00:00:51,450 ‫That means the values equal for all of them. 13 00:00:51,480 --> 00:00:55,510 ‫That means if I'm extending this founding, this will be one of them here. 14 00:00:55,760 --> 00:00:59,670 ‫So this will be one of them here when I'm here and then it sell. 15 00:01:00,180 --> 00:01:04,440 ‫And you can see why, because we are extending them as a common pattern. 16 00:01:05,440 --> 00:01:06,340 ‫You get it right. 17 00:01:06,670 --> 00:01:13,540 ‫But what if I need to utilize these common properties, but I want different value for different item, 18 00:01:13,870 --> 00:01:17,890 ‫maybe for item one, I need one item, do I need to them? 19 00:01:17,920 --> 00:01:22,250 ‫Item three I need denim item for I need freedom, something like this. 20 00:01:22,870 --> 00:01:26,140 ‫So in that case, we utilize mix ins. 21 00:01:26,680 --> 00:01:32,830 ‫So basically what we can do is we can say mixing and then give it a name and then we can define all 22 00:01:32,830 --> 00:01:34,030 ‫the common properties. 23 00:01:34,480 --> 00:01:39,730 ‫Now, if we have anything specific in terms of color and everything, we can define that. 24 00:01:40,360 --> 00:01:47,920 ‫Now this is important when we want to import some common properties on multiple items and want something 25 00:01:47,920 --> 00:01:49,330 ‫different for each one of them. 26 00:01:49,600 --> 00:01:51,930 ‫So something similar, we are going to do it there. 27 00:01:52,660 --> 00:01:58,420 ‫So for example, what I'm going to do is I'm going to come in this everything later. 28 00:01:58,420 --> 00:02:00,220 ‫You can access this whole or. 29 00:02:01,380 --> 00:02:08,820 ‫For an extended example, but I'm going to copy and come in, you can utilize control and slash together 30 00:02:08,820 --> 00:02:10,020 ‫to comment all of them. 31 00:02:10,470 --> 00:02:14,430 ‫Now this example is what extent, but here we are going to play. 32 00:02:14,490 --> 00:02:15,590 ‫It makes sense now. 33 00:02:16,200 --> 00:02:21,360 ‫Now what I'm going to do is I'm going to utilize Addre makes it simple thing. 34 00:02:21,690 --> 00:02:22,230 ‫I'm here. 35 00:02:22,230 --> 00:02:27,150 ‫Let me provide a name to our mixing letter item property itself. 36 00:02:28,050 --> 00:02:34,620 ‫So I'm going to call this as item properties and help you see this whole bracket thing. 37 00:02:35,010 --> 00:02:35,970 ‫This is important. 38 00:02:36,480 --> 00:02:39,720 ‫So let's take this bracket and I'm going to call this out. 39 00:02:39,900 --> 00:02:44,090 ‫Dollar going to basically, I'm creating a variable color. 40 00:02:44,280 --> 00:02:45,900 ‫OK, looks fine. 41 00:02:45,900 --> 00:02:46,820 ‫Looks good to me. 42 00:02:46,830 --> 00:02:51,630 ‫But let me take this common property and it here and remove this item property. 43 00:02:53,620 --> 00:02:58,780 ‫Now I'm going to play with this whole background thing, but before that, let me remove this extent 44 00:02:58,780 --> 00:03:04,870 ‫because we are not going to walk with any type of inheritance now, so I'm going to remove this and 45 00:03:04,870 --> 00:03:09,250 ‫what I'm going to do is I'm going to work with this background property for all of them. 46 00:03:10,150 --> 00:03:17,590 ‫So let's say this as here I'm going to add a field as background, and I'm going to call this as. 47 00:03:18,940 --> 00:03:25,150 ‫OK, so let me remove this background so I don't need this background property for all of them. 48 00:03:25,150 --> 00:03:27,550 ‫What I'm going to do is I'm going to drive. 49 00:03:27,670 --> 00:03:29,680 ‫I just need to import this mix in. 50 00:03:32,050 --> 00:03:35,860 ‫So I'm just going to include my mix, and I'm going to say include. 51 00:03:36,670 --> 00:03:40,090 ‫Head, I need to give it to a name that as I'm property. 52 00:03:41,750 --> 00:03:42,590 ‫Copy this one. 53 00:03:42,740 --> 00:03:46,090 ‫And I just need to pass devalue about the color. 54 00:03:46,250 --> 00:03:48,380 ‫So let's say this is my color. 55 00:03:49,590 --> 00:03:53,610 ‫Copy this one, paste it here, and I need to remove this background. 56 00:03:53,760 --> 00:03:55,170 ‫OK, save. 57 00:03:57,180 --> 00:03:59,590 ‫Now, what is going to happen behind the scenes? 58 00:04:00,030 --> 00:04:01,530 ‫We have this whole mixing. 59 00:04:02,490 --> 00:04:04,410 ‫We are going to include it here. 60 00:04:04,770 --> 00:04:10,140 ‫And whenever I'm going to include it, it is going to call this mixing with this color value. 61 00:04:10,410 --> 00:04:14,340 ‫This is color values going here and then this color values going in. 62 00:04:14,880 --> 00:04:17,070 ‫So basically, we passed this color value. 63 00:04:17,520 --> 00:04:21,960 ‫It is going to travel here and then it is going to travel inside it. 64 00:04:22,380 --> 00:04:26,130 ‫So for an item to this is our color value. 65 00:04:26,640 --> 00:04:32,870 ‫Now, if I save this one, jump back here into our style, our CIUSSS jump onto our item two. 66 00:04:33,390 --> 00:04:35,900 ‫You can see our branding is one on this. 67 00:04:35,910 --> 00:04:36,460 ‫15. 68 00:04:36,540 --> 00:04:37,410 ‫This is border. 69 00:04:37,830 --> 00:04:38,610 ‫Okay, great. 70 00:04:38,640 --> 00:04:40,680 ‫All the common properties are included. 71 00:04:41,100 --> 00:04:42,690 ‫What if you see this bag grown? 72 00:04:43,820 --> 00:04:45,440 ‫Four, nine, five five six. 73 00:04:45,830 --> 00:04:49,130 ‫Here you can see background four, nine five five six eight. 74 00:04:50,110 --> 00:04:55,990 ‫That is included because of this mixing, let's do some more fun, let's try to extend it here. 75 00:04:59,480 --> 00:05:01,730 ‫Let's try to do this with Adaora as well. 76 00:05:01,850 --> 00:05:03,380 ‫Let me included everywhere. 77 00:05:10,970 --> 00:05:16,220 ‫And I remember I need to change color for all of them, so I'm going to take this. 78 00:05:18,360 --> 00:05:20,400 ‫And I can remove this background itself. 79 00:05:22,940 --> 00:05:24,500 ‫Similarly pragmatic itself. 80 00:05:29,320 --> 00:05:33,490 ‫Now here we have a background image, so I'm just going to remove this color only. 81 00:05:34,890 --> 00:05:35,730 ‫OK, great. 82 00:05:35,850 --> 00:05:36,970 ‫Let me save this one. 83 00:05:36,990 --> 00:05:43,890 ‫You can see we have this pop up right click close this one now, if you observe on this side, you have 84 00:05:43,890 --> 00:05:50,100 ‫this background, we have this background as well as the other properties. 85 00:05:51,900 --> 00:05:59,760 ‫So in this way, we are able to include all the common properties, as well as the properties that require 86 00:05:59,770 --> 00:06:02,480 ‫some different variables, different color. 87 00:06:02,940 --> 00:06:05,520 ‫Now we can play with other content as well. 88 00:06:05,880 --> 00:06:11,020 ‫Suppose I need foreign sites different for all of them or maybe change the color. 89 00:06:11,030 --> 00:06:11,940 ‫I can do that. 90 00:06:12,240 --> 00:06:15,450 ‫For example, let's change foreign sites for all of them. 91 00:06:15,870 --> 00:06:21,270 ‫So what I'm going to do is I'm going to add up all my hair and just include a new variable. 92 00:06:21,420 --> 00:06:24,960 ‫Let me call this as if that is going to be a foreign site. 93 00:06:25,380 --> 00:06:28,320 ‫And let's say this has 15 pixels. 94 00:06:29,280 --> 00:06:31,620 ‫And remember, I'm going to limit my. 95 00:06:33,480 --> 00:06:34,350 ‫Item one. 96 00:06:34,800 --> 00:06:35,250 ‫OK. 97 00:06:35,820 --> 00:06:38,730 ‫I still need to open this so we can see the change here. 98 00:06:39,920 --> 00:06:44,210 ‫So here I have a first 15 picks, and let me copy this episode. 99 00:06:44,570 --> 00:06:46,550 ‫This episode is going on here. 100 00:06:47,300 --> 00:06:51,110 ‫Let me add my hair and then this emphasis going here. 101 00:06:51,470 --> 00:06:55,340 ‫So let's say this now, once I save, this will be changed. 102 00:06:55,850 --> 00:06:59,570 ‫So if I save this one, OK, not because that's 15 pixel. 103 00:07:01,400 --> 00:07:02,070 ‫OK, great. 104 00:07:02,090 --> 00:07:03,320 ‫Let's try it others. 105 00:07:06,440 --> 00:07:08,690 ‫Let's take 16 picks in here. 106 00:07:09,650 --> 00:07:11,540 ‫I haven't saved it yet, remember? 107 00:07:11,780 --> 00:07:18,610 ‫So if I take 16 pixel here it is going on are mixing with our efforts and then it is going to be 16 108 00:07:18,620 --> 00:07:19,070 ‫pixel. 109 00:07:19,460 --> 00:07:19,940 ‫OK. 110 00:07:20,210 --> 00:07:21,380 ‫Hit it 16. 111 00:07:21,380 --> 00:07:23,000 ‫And her grandkids 15. 112 00:07:26,530 --> 00:07:32,200 ‫Now, if I save this one, you can say it is not working, you can see we got an error. 113 00:07:32,440 --> 00:07:36,970 ‫And this is the place when this order is going to walk, you can see we got an error. 114 00:07:37,480 --> 00:07:45,730 ‫The error is that we are passing 16 picks into 14 item one, but we haven't provided any value for that 115 00:07:45,730 --> 00:07:46,160 ‫item. 116 00:07:46,990 --> 00:07:49,120 ‫So what will be the value for other items? 117 00:07:49,120 --> 00:07:55,810 ‫Because we have only five 16 pixels for first item, but what will be the value of other items so we 118 00:07:55,810 --> 00:07:58,090 ‫can hear Ranger a default value? 119 00:07:58,390 --> 00:08:00,760 ‫Let's say default value has 15 percent. 120 00:08:01,150 --> 00:08:06,430 ‫So if we are providing a value, then it will be taking this value. 121 00:08:06,460 --> 00:08:09,790 ‫Otherwise, this will take default value for others. 122 00:08:10,150 --> 00:08:13,390 ‫So, for example, here we haven't provided value for a phone size. 123 00:08:13,570 --> 00:08:17,200 ‫It will take 15 percent, but here we have provided 16. 124 00:08:17,380 --> 00:08:18,850 ‫It will take 16 pixel. 125 00:08:19,180 --> 00:08:22,660 ‫Now, if you absorb the change, I don't want a 16 pixel. 126 00:08:22,840 --> 00:08:26,350 ‫But for other items, we haven't provided any value simplicity. 127 00:08:26,350 --> 00:08:26,350 ‫15. 128 00:08:26,950 --> 00:08:29,230 ‫Now let's dig and provide value for others. 129 00:08:29,290 --> 00:08:31,390 ‫Let me copy this one out of 10. 130 00:08:31,750 --> 00:08:33,610 ‫And let's say 20. 131 00:08:34,210 --> 00:08:35,150 ‫I haven't saved it. 132 00:08:35,170 --> 00:08:36,640 ‫Remember, I haven't saved it yet. 133 00:08:36,870 --> 00:08:38,500 ‫And here you can see it's 15. 134 00:08:38,830 --> 00:08:42,250 ‫So as soon as I save this, you can see it's changed. 135 00:08:43,270 --> 00:08:49,840 ‫Now, I had one important thing, this value goes here and what I did, and then it moved here. 136 00:08:51,130 --> 00:08:57,490 ‫So basically, if you know, if you have a knowledge about programming, we work with functions, argument 137 00:08:57,490 --> 00:08:58,240 ‫parameters. 138 00:08:58,570 --> 00:09:04,810 ‫So it's basically that if you are not aware of this, don't worry, you will know once you grow that 139 00:09:04,810 --> 00:09:08,380 ‫the basic example, because it's a nuanced topic, to be honest. 140 00:09:09,160 --> 00:09:09,660 ‫That's it. 141 00:09:09,670 --> 00:09:11,470 ‫Now you can play with others if you want. 142 00:09:11,920 --> 00:09:14,260 ‫So that's the whole ball boys off makes sense. 143 00:09:14,270 --> 00:09:20,560 ‫This give you a superpower to play with something like this, which you can not imagine what can with 144 00:09:20,560 --> 00:09:21,520 ‫normal CFS? 145 00:09:22,550 --> 00:09:28,220 ‫There are few are that advanced concept that I really don't want to cover as a big note, get some knowledge 146 00:09:28,220 --> 00:09:34,100 ‫about programming language, walk with maybe JavaScript, bite on it, any other language and then get 147 00:09:34,100 --> 00:09:39,830 ‫back to fast because understanding our function, understanding about other things in a programming 148 00:09:39,830 --> 00:09:42,620 ‫language is much easier than understanding it. 149 00:09:43,640 --> 00:09:46,160 ‫So that's it for makes sense. 150 00:09:46,220 --> 00:09:48,380 ‫The other topic is operators. 151 00:09:49,770 --> 00:09:54,120 ‫And I don't want to cover this in form of a lecture because it's pretty easy. 152 00:09:54,930 --> 00:10:01,620 ‫So for example, if we have a rate of 100 percent, we can provide something like addition, subtraction, 153 00:10:01,620 --> 00:10:06,300 ‫multiplication division as well as percentage with the help of these values. 154 00:10:06,840 --> 00:10:11,310 ‫So I can say 100 minus 50 and it will give me a result of 50. 155 00:10:11,370 --> 00:10:15,150 ‫That's how I can pass different values with the help of operator. 156 00:10:15,480 --> 00:10:20,310 ‫If you try to do this with the SS, you are going to get in and an audit is not going to work, but 157 00:10:20,310 --> 00:10:26,140 ‫we can utilize these operator with whole SC assisting, for example. 158 00:10:26,150 --> 00:10:27,690 ‫Let me take a quick example. 159 00:10:30,000 --> 00:10:34,090 ‫Let's say you want to pass this one to a lower price 600. 160 00:10:34,110 --> 00:10:37,650 ‫Let me pass plus hundred and if I save this one. 161 00:10:39,380 --> 00:10:41,750 ‫Jump on to my stylus, yes. 162 00:10:42,780 --> 00:10:44,420 ‫I jump on to title now. 163 00:10:47,080 --> 00:10:48,760 ‫You can see at seven and now. 164 00:10:49,910 --> 00:10:53,830 ‫So at 600+ under, so that's how this is going to up. 165 00:10:55,090 --> 00:11:00,550 ‫I hope you are the basic idea how you can do multiple calculation and that is going to work well. 166 00:11:01,270 --> 00:11:07,690 ‫I mean, we can play with other things, let's say one plus three, the same this one. 167 00:11:07,980 --> 00:11:14,890 ‫And if I jump on to our style or CC, jump on to name thing, you can search for them. 168 00:11:16,270 --> 00:11:20,260 ‫OK, I hope you got the idea how these operators are going to work. 169 00:11:21,010 --> 00:11:24,910 ‫So that's all about the SAS as a beginner. 170 00:11:25,120 --> 00:11:26,330 ‫I hope you got the idea. 171 00:11:26,350 --> 00:11:28,420 ‫We try to discuss everything in detail. 172 00:11:28,720 --> 00:11:33,130 ‫Also with the example, I hope this last session was helpful. 173 00:11:33,490 --> 00:11:34,660 ‫All the best for future. 174 00:11:34,720 --> 00:11:37,510 ‫Thank you for calling and I see you guys in the next one.