‫Hey, there.
‫Welcome back.
‫Now let us in Mustang, how to up in a practical way with our current concept that we discussed.
‫Now first thing is I'm going to create a new folder and I'm going to shift all my thesis file inside
‫that folder.
‫Now there are two answers that you will see different people or different company organize their file
‫differently, some directly key this year.
‫Along with this achievement file, some create style folder, which is called style, and then keep
‫all their files inside this folder.
‫Are there are chances you will see folders like assets, and some keep all their files inside this asset?
‫So basically what happened is they created their asset folder.
‫Inside this folder, they create media as well as styling.
‫So inside media, you will have all the images inside styling or style.
‫You would have all cease-fires.
‫So I'm going to remove this.
‫I'm going to just create a folder names style for now, let's call this a style.
‫And I'm going to move all my success inside this file folder.
‫Now, the reason I'm taking this pre-med project is so we can understand how to convert things and also
‫how to write new things.
‫So this is the first step that I have moved everything.
‫Now, all the drama that we are going to do will be inside this file folder.
‫OK.
‫Know everything is fine.
‫But let me change this, so we are going to hear go inside our style folder and then inside out of style
‫or CSIS.
‫Remember this point?
‫And one now I'm going to comment my response to rosiest because we will be combining everything inside
‫our style or courses.
‫OK, now let's jump back, jump back to this nonsense.
‫And have you ever have options regarding different topic like variables make sense, inheritance ends
‫and few other?
‫OK, let's start with the basic one.
‫It does variable.
‫But before that, let me create a new file.
‫And I'm going to call this US style as S6's.
‫Remember, it's style dot x, remember this point?
‫And just remove everything from my style or CSIS, because this will be created by the convergence of
‫our C-spine, remember this point?
‫So we are not going to write anything inside this file.
‫Let me pick up carpet.
‫And paste this inside out of this, save this one, save this one.
‫Now this file is empty.
‫Our style doors, he says, is empty and we are not going to edit anything whatever we need to do.
‫We will do insider style Doc S6's.
‫And then by this point, the other thing is, if you need to connect multiple files, you can do that
‫with the help of a mod or there will be few other things that we are going to discuss.
‫So what I'm going to do is I'm going to utilize this file only now.
‫Once you are working with this access file, you will see this.
‫Watch SAS icon remember the extension?
‫We installed this one now.
‫This extension is going to help us get this stuff.
‫Now, if I click this one, what it is going to do is every time we do any changes, it is going to
‫convert a precious file into CSIS.
‫So that's the main task of this extension.
‫For now, if I click here, you'll see a stock working on a just watching.
‫That means everything is going to be generated here inside styled CSIS.
‫And now if I do any change, this will automatically save the only time it is watching, remember.
‫So you can now jump onto styluses so you can see everything is generated automatically, and you are
‫also going to see these render effects that we discussed during browser come back compatibility.
‫They are automated and you don't need to write them.
‫They are auto generated for different browser.
‫Here we are working for our Internet Edge as well as Explorer.
‫Ah, here we are, working for Chrome as well as Safari.
‫So you will see all these changes automatically.
‫I hope you are the first idea why it is important to utilize S6's.
‫Neither Baker now you don't need to do that, but you should be aware of what are the changes that it
‫is doing.
‫You can see the first changes.
‫This whole web getting itself, and that is automatic.
‫We are not going to touch dots this way and everything will be inside on S6's.
‫OK?
‫Let's talk about the first point, which is variable now.
‫By default, we have variables in access.
‫We can use double dash, then the final variable.
‫But with the help of our S6's, we can do that.
‫All you have to do is use Carlesimo and give our variable name, for example, here why I want to create
‫a background color.
‫Let me say the color.
‫And provide a background color, let me say this one.
‫Let me copy this one.
‫I see this is watching every time I see it, it is going to watch.
‫And we can close this.
‫We can do several sittings.
‫So all you have to do is just jump onto settings.
‫Jump on to settings and how you need to such a move like SAS compiler.
‫This is the one I knew will get multiple option, the first option that you need to do is here inside
‫your edit and Jason.
‫Click here and convert it into default.
‫This is your generator map.
‫Just done it to follow.
‫Remember this point?
‫So this is going to be your first setting, which is generate map.
‫Just done it off.
‫The second thing is you can also just remove this awkward window that we are going to get every time
‫we do anything.
‫Now, if I try to change anything, maybe let me create another background color.
‫Maybe call this our second regular.
‫And if I save this one, you can see now we don't have any type of terminal also deceived.
‫So you can utilize this setting, which is known as show output window.
‫If you want this output window, you can just check it.
‫And if I try to remove this one and say we are going to get this done, this domino is helpful if you
‫want to see any type of error.
‫Since I'm recording this tutorial, I'm going to keep this tunnel open so we can see different types
‫of errors if we do any OK?
‫These two setting remember what we know?
‫Second thing is generate map.
‫Make sure you change it to false.
‫Remember, this should be false and then say, that's it.
‫These are the two setting and all settings.
‫OK, so this is the first change that we did.
‫We created a variable and now I can utilize this variable instead of this color.
‫And here I can directly save this variable.
‫And every time we are going to save me, I want to get this out window.
‫Close this one.
‫Now here we have added this variable basically in our X-File.
‫And if I jump on to my style or CFS, you can see instead of variable, we have the exact color.
‫Right click and splitter down on the right side.
‫Here you can see, not CSI, we have this variable, and here we have the color directly.
‫So these are the changes that you will see automatically in your style.
‫Rodriguez's hair, you can see the variable, and it's also not defined because it will be converted
‫into values directly.
‫OK, that's done.
‫Let me get back here.
‫So that's the first thing about variable.
‫Now there are few other things like nesting super important concept, super, super important concept.
‫So we walk with parent and child relationship and our female.
‫So what we usually do is we create a testimonial and then inside we target this item or we fuss and
‫try to target this container and then we target this items whenever we are writing these type of cases.
‫So hard, if you see the example that we are going to work, we have this items, this whole item thing
‫and then inside this item, this item glass, we have image, we have paragraph four name title as a
‫less description.
‫Now, instead of mentioning like this item, image items, name items, title item description, we
‫know this belongs to item.
‫So what I can do is just take this image itself.
‫And keep this inside, I only here.
‫I'm going to add this inside item itself.
‫Now this is inside items, that means all the image inside out items will have these properties.
‫Remember something similar we can do with name glass?
‫Let me take this one and head off to my image.
‫Let me add it now.
‫Remember, there's all of this is inside out items.
‫So let me remove this point.
‫Now, similarly, I can do this with Biden.
‫I'm going to pick this one and take it inside my items.
‫The next one is going to be description.
‫I'm going to take this one and take it inside my items.
‫And if I save this one, every time we save, you are going to see the success message here includes
‫this one.
‫We have few other things.
‫Let me take this description.
‫And let me add it to the other description.
‫Atika.
‫And then remove all the unnecessary thing.
‫Save this one success.
‫Close.
‫Now how you can see all the child only elements that were in sight are item class.
‫I didn't say that item selected itself.
‫So that's the first important thing.
‫Now when you say this behind the scene in our CSIS.
‫This will be converted, so this will be converted as items.
‫I am you can see this is automatically converted.
‫The second thing is about this name.
‫This is converted.
‫What items name?
‫Then the other thing title, it is converted.
‫Description this is converted.
‫So you have this nesting option now at the time of writing this nesting.
‫This really helps.
‫Now you don't need to figure out, OK, what type of things I need to target because you have information
‫these images inside of items.
‫Similarly, this title is inside out items.
‫This helps a lot.
‫So that's where this whole nesting things come into picture.
‫Now, if you take this example, the example on the website, you will see that they're targeting a
‫navigation bar.
‫And they are directly targeting all the U.N. allies as well as attacks.
‫And this is a good example, actually.
‫And at the time of conversion, it will be now well, naturally as well as now the attack.
‫So this is important and I hope you got the idea how this is going to work.
‫Now, I hope you got the idea about these two points, which is variable, as well as nesting in the
‫next lecture, let us all to discuss about how Bisons modules and fewer that things are going to work.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.