 My name is Rajeshwar, and I write one of my own personal stories, and this is my book, I and I are going to put it between my bed. And don't really need to take notes if you don't want, because everything is normal, it will vary. You can read the translation, the table, the story that I'm going to give you. My person is going to go a little fast, because I don't really need to talk a lot. So let's get dirty with some points, so we can figure out. Let me show you all of these people, somebody who is CSS, and how it is introduced to you. Go ahead. So, I'm going to figure out if it is possible to become a little bit better CSS order, by using CSS Quicker. In its role form, CSS is a very important human being. I came from a programming role in environmental 2005. I didn't realize I left, but we had lots and lots of good programmers. I was also a good programmer, and it was very hard to come. So I decided to make up the facts of myself to design, write, and solve all sorts of things that was CSS. One thing coming from a programming background was, when you look at CSS, it's pretty straightforward. Just when it's called a cascade, the cascade will come to the bottom, it goes like this, one by one. There's no logic, it will come to the bottom. You can't even find anything. So it wasn't even first created. So, in case it came to the bottom, what this is, you write it off, you forgot, and you're not writing it across the bottom. So you can design a process like, it takes white, it takes red. So it's a very important human being to write CSS. That comes from years to years. So that's something you can do. One of the things that can take control of CSS is how you can really do your power is using CSS pre-processing. Some of the names that come up are like SAS, less, pilot, and there are a few couple of others coming up very recently. But for today's talk, let's discuss on SAS, because if you know one of them, it's going to be pretty straightforward, pretty easy. So some of the resources that you can go to are Samsung, less CSS, and the last one is for SAS. Again, you do not need to take any of the notes. All this is developed to download. I will come back to the slide where you can have the download here, including the reservations in there. It's actually much, much easier than most designers or most human beings exist for the same. It's just out, right? For Windows, because Mac and Windows already have to be more than it's installed. And it's all one of them from SAS. And it's all composed, then you're ready to go. So we're going to install it. We're going to install it on the R&D for Windows. It's a deployable case or something like that. So you double-click on it, install it, go to your command line, and it's all full of this. It's working on it that you're going to put straight. So for Windows, you can go to SAS. Initially, during the early days of SAS, it was in the syntax for .sas. Right now, it's currently .scss, which is more, and I think it's developed in more of a CSS. So any new people coming from the CSS world would be way easier to enter into SAS through this syntax. It's pretty much CSS. Pretty much. So today, when I say SAS, I'll be referring to most of this. That's pretty old school. So let's leave it at that. Which is cool. After I work, this one was asked to help you write CSS. It's easier, way faster, way better. So it's three processors, most of the three processors. There are things like variable. So variable is something that many CSS borders that last longer. At least you could have defined, if you have a key, at least you could have defined the color of the notes. So it would be on top of your CSS. So you're going to just refer it to there. And when you find the variable, it tells you, hey, the notes is very red. So you just change it there, right? You just change the hex for it all. You want to have it right in there. Look at each and every four. Figure out what was the color of the notes. So variable procedure is in three processors. Next thing is available now. The looping for next thing is right at one class here. And I can continue to write these tri-classes inside itself. So for the CSS, you have to figure out when moving on your own, I write a class here. But here it's out. So it's in this one. There are mixings. Mixings from a programming mode is something that functions the right ones, but they need to be used to do the same thing. They control that, but it won't work. For example, if you want to use a function, you can multiply that color on the website and it's going to be black. So it's zero, zero, zero for a site. You can say, my thing, how many percent is it? And you can have included an extension. Included an extension is a useful point as input. You might have mixed it on a function somewhere, and you're going to use it anywhere. How do you find it? You just say include. That's probably the name of the extension. Maybe you'll use it again in the end, where the amount of the site are, on the error, put it. Extend. Actually, extension is an active block. So you write both blocks. Caretics, blah, blah, blah. Do you want to use that? Extend. That's perfect. So, so right now you see that it's no longer skinny. You don't need to control one by one. You can jump. You can buy functions. You can have businesses with it. Now, when you started, it was a bit complex. That is why most designers in initial high-status orders are reluctant to jump into three processes, more because of the fact that you have to fire up and fire up a long line to start doing it. So, but these days, a lot of the GUI tools, you just use holding. And that's it. You just use a watch holder. You just keep writing it. It just does everything it's vector on. It feels like I'm going to tap. It's getting loaded, but it's loaded, and you're going to see as you use it. There's a new one comment that will stop that, that's three. Here's an example. So let's look at it. Can you? Okay. That's a view we're going to see. So, see, here's an example. Lots of variables a lot. So I just defined, say, grid columns as well, grid columns in the city pixel of grid column and 20 bits of gutter. Then I run a basic one, grid span. It's like a function. So I'm writing only one. Say, take a parameter of columns, grid columns, white, and the gutter, and set a grid with that. So I set a grid, and then I start writing the grid here. That took great. I said, any span inside that grid, say, span 1, span 2, whatever you're going to use, set a plot length and a margin length of gutter white, it's going to pick up the variable from there. And I'm saying, from 1, from 1 to grid column, you're going to pass a parameter, it's going to grid column, which I've already passed by D4 and 12. You can change it here also. Let's say 12. So it passes 12, it calculates this, this, this, this, and that. It's calculated, and I say, include grid. The grid is not fired. As soon as grid fired grows here, it calculates this, calculates that, and the generator sees it as something like this. I'm going to write this 1, 1, span 2, span 3, not just the convenience of generating a loop here by defining few things there. The fact is that, if the client comes back to normal, I say, I have a 960V cell. You have a 960V cell. Let's go liquid. Or I say, let's go 800V cell. Mine is all over the grid. I can simply start calculating. There it changes. This is a very small example. Okay, if you put it in order, why can't you put it in order? This actually is pretty shocking, even when I put it in order. Okay, no questions. So, let's put it in order. But before that, if you have questions, I'm ready for any questions before we go then. If you do have questions, you can just, you know, see a system of files. Don't look big for everything. You can put one with that. Yeah. I have a different question. Yeah. If you have a question, do you have one with the other with the CSS file? Is there any correct way to merge it to less or less? Yeah. It's actually very easy to do. Any CSS file which you've already written can be transferred back to your left or SAS. By using few commands, I say SAS and her. So you actually can first look at your CSS and then do it the first time. The only unfortunate thing is you will not understand it because those are the very things which was never used since the CSS. So we never use it. You will not understand it. You will not write it simply because that's what you have to write. So you already have it made CSS as well. Actually, recently, they had 40 problem lines of CSS called and made a version of SAS. It was a package. So it's possible. So will not have you or will not you have what you call a problem of being constricted to less or less? You... Yes, you will have because those are the only two environments where you try to merge them. The only best thing you can do is you'll bring a messing for you because you understand if you're going to write it wrong, you'll bring a messing for you. No make sense will be done. No problems will be done. Those are the things which are completely new to CSS. So you have the right. So you have to remove this big project that was already done in CSS. It will be easier to transition but it's not 100% done for you. But it is 100% done then. Anyone can simply just do it right. So it's... Yeah, it's... Yeah, it counts and you write it. So you can refactor it easily and quickly. We have one article but it is. It was like 499 of CSS schools refactor it. I also give you a reason why the refactor is important and why it is easy. You can refactor it. Look at this. My demo I can say this, blah, blah, blah and only one file for pressure or demo, right? It is a long file and it is similar. You include only one CSS. Meaning most of the time if you're working with multiple people or even alone yourself if you write only one single CSS it's very difficult to dedicate. You'd rather have multiple files with multiple functions just like how programmers do. So that you can go back and look at the files and keep changing on any of the things individually so that you can ask everyone. SAS and this helps you do that because you consider only one file maybe demo.scss but everything you write will be recompiled back into one single CSS maybe demo.css This is the only thing which you need to upload on your server. So these are all actually partial separate, separate files. I say in it only for initialization. Here I'm only writing about the body and understanding. Reset I can even figure out if I want to use edit-maiors-reset or the new normalized one. How is this reflected in everything with respect by variables? I write only the variables. Knowledge guys actively working on some other ultimate. So but the final way they merge back merge back to code or merge back to CSS they're the only one guy or you don't even need to concentrate on demo.css or style.css so that compiles this is the one file that does So here I'm just segregating the mixins only for mixins functions I write all the mixins here so if there's any problem with one of the mixins you can combine and figure out so quickly that mixins here grid if there's a problem with the grid I'm just going to change here sprite I'm just going to change the sprite ok by the way can anyone tell me how do you very vision have you heard of Jonathan Sluca Sluca have you heard of Smax yes MSD yes that's how so I was like yes you were actually I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was I was So, the last name and then everything to be run... No, no, no, no, no, no, no. I don't know what to write. I find I have a problem. I want to read the script. There should be a way to fix it, but I didn't have a way to talk to my app. But anyway, perhaps you are right. Because again, it will help you feel it. For instance, I can say animals. Animals in the zoo. So I can keep defining this variable again and again. Probably if you want to say animals, keep writing, expand, dash, live it. And you will figure out what you will fit. Yeah. Yeah, so, that's a use case. So, I'm sorry I couldn't understand it. I think I looked you all the time. Okay. So, the illustration is practically done. So, let's do some demo. We have lots of time. I didn't want to do that because a clean is right here, right? So here, I just started typing type wrapper. Next I'll put it in some wrapper. Change the angle. Change the angle. Change the angle. Change the angle to white. Oh, I can't do this quickly. So, what I will do is, the one which I will put it in the wrapper. Which one do you suggest? Backup. Backup. Backup. Backup. Awesome. Okay. So, I have started writing. So, for example, let's put something for now. And say, if something sticks in. I just started writing something and it was a wrapper. So, let's put it in. Okay, by the way, before that, let me just speak to you. When you start a project, there are a few things for the configuration file. You can see another one. So, this is the one configuration file. So, in my command line, you can have a GUI code, but in my command line, what I'm saying is, compile, watch, and if you want in my folder. So, any changes, it's actually, compile on the CSS and reflect it. In the browser. And have your slide with both the GUI code and so on. So, don't worry about that. I'll reverse it if nothing is coming up. So, I said, compile, watch. And it's actually looking at the configuration file to watch it. Now, compass is actually piloted very closely with the GUI project. So, people who do this will be piloted a little more easily with configuration then. But you are also perfectly okay to scan along. I say, scan along. This is the root pod which I'm working on. And I can define the CSS directory here where the CSS should be compiled and thrown. I'm saying, sounds dark, going to the SAS. So, this also, it's a very cool thing. The thing is, if I start writing this local box, I say it from SAS. My developers want somewhere else. They can have their own local configuration saying somewhere else. So, define once and keep working on it. You can even say image dark. So, in CSS, when you say image dark, so, you have to go back and figure out where my image is. Here in SAS, I can simply define a location of the image one time and push the image anchor. So, on my development server, I can say IMG is this in time of local cost. But on the production server, I can redefine this for the production.config or something that says, high security static, blah, blah, blah, which may be an Akamai URL, right? So, you can put more from that. I can even interact with JavaScript and fonts for your main font page. So, that's what I think about that. Let's start working strictly, strictly to the... I don't want to talk to you just quickly. So, I can set it up. Cool. So, here, let's go to the code one by one. I'm just trying to find a small table there, right? So, this is the local data. The border radius of my pixel. We include a box, I think. Do you know what's both sides, by the way? We talk, right? So, here, let's look at this very quickly and I'll tell you what's happening. Here, it's changed back. What just happened? No, nothing to do with that. There's something called a box mode. You heard of the box mode, okay? What is the box mode? CSS box mode. Anything when you're done with CSS, at least in the past one year, do you think that's the new model? Yes, I already had a solution. The problem is, in CSS box mode, it's a pure, mathematical, mathematical, sometimes a bit of mathematics here and there. So, we can find a box in 960 pixels, a box in a mirror or a box. If you start getting jetties, it's not going out, right? And IE6 doesn't have... But anyway, so what I need to say is, when you define 960 pixels, it's actually not like 960 pixels. Any more, the moment you start getting beddings, borders, border 1-pixel, 2-pixel, those kids are growing up, means your layout is... you have to always do your calculation in your layout. So, here we go. I just say box mode, that means it will be exactly what you find. It will always fall out back inside your code. So, here's the beauty, guys. Border reading. Well, how do I border read this in CSS? But most, don't track it, everything, everything, you can find in the game, right? So, here, in CSS, I can simply sign into it in this. Only the lab regulates, and only on the left, only on the right. And the beautiful thing is, combined with very short, quick loads here, right? Very quick lines on single lines. Let's look at the generated CSS, demo on the CSS, and let's go forward, what was it? Look at that. It writes everything for me. If you now take away my laptop and ask me to write this, and if I would be fired right now, I'm dead, because I don't know. Because while in CSS 3 was introduced, my soul was in it. What the hell? I'm not really right. I was even pretty very stupid to think of myself as a macros to write this. And the combos came out, and everything was done for me. So, quick, I don't even remember, I don't even know. Even now, I have no clue how many of the CSS are there, right? Or how many of the CSS 3 are there. But I can write 8 of the CSS, 8 and 9, while I'm still using combos. So, things like this, it's way easier for you to write. The first thing, it's already being like, the combos is already there. Now, you can write much cleaner quotes. Right here, I can even change this by saying image URL, and the location inside my eye is dead low. There's your images. I'll just change it in the boundary file instead of imd to imd. Images, and it continues to just work. Let's do some let's do a color. Color range. Let's forget this for now. Let's try to go there. Let's be in a box, quite close to me. Nothing yet, so let's find, let's open up the food for now. So, let's say you can color, where? I already find that. Can you see, can you get ready? So, I'm going to say, on the light amount of that, lighten my color range to 50%. Can you see the pressure? Okay, let's do black. Let's do lightening it. So, it's dark, right? So, that's right. So, let's give it a color. Easy, right? Let's do some glasses. Let's put a glass ring. Let's put a better one this first seven. Blue. Green. Some green, some blue. Some red. So, let's say, blue, right? Blue. Let me shift to red. So, work. Okay. Okay. Let's see. Okay. Sorry. So, you can change colors, addition of colors with subscribed colors. You can define a equal color there. It will give it the lightening of the subcares. You can get the lightening. You can change this color. Add colors, plus subscribed colors, things like that. Color functions, right? That's what you already see. That'll be the plus, minus, and... So, we'll try a four look. So, four look, I'm going to mine to five. Let's look at the generative CSS. Ah, generative CSS. If I'm going to add it in here, it's in here, right? So, I can't figure out where it's in here. Let's say it's right above one, then we'll CSS. So, while I'm going to CSS, you really don't know what I'm saying. Here, any wrong CSS is a good idea. So, you can't figure out where it's wrong. There's this. It was a comment that says, what was right here. I didn't want to talk about that. So, let's open up Sprite. Let's forget that. Sprite is one of the ways. Actually, you have to figure out where is the location in the pixels, and you have to set X and Z to Y, X is minus five. Here, if you look at my folder, I take social and say, let's go Google, make it all separately. So, I don't even want to worry about combining them and taking the Sprite. So, I just wrote a quote that says, import inside the folder called social everything with a .pnt file and include a mix and form all social, because that's the name of the folder, and my Sprite. And I say, Sprite social. This is going to be a custom class. X10 here, example of X10, and it's a stock. About an image replacement.io. It will actually be a class now. So, it's also Sprite, giving you the width of this, this of this. Now, in my HTML, let's write another beautiful, this is actually, this is a school of beautification. I said, Sprite social, which I wrote there, make it 64 pixels social Facebook, social Google, social LinkedIn, social Twitter. And what happens now, we should look at this case now, right? It's, it writes everything, Sprite, Sprite Facebook, everything for me, picks up this, picks up this, Twitter, stumble upon, calculated, right? I didn't even, I didn't write that anywhere in my SAF, it's already calculated. It even combines my images and get me this, right? I can't define this, by the way, through variable sayings. Let every one pixel in between go this way, that way, we don't need doing anything. It even says, right, it compiles into this PNG from the image of, like, just put it. We don't need doing that. So, Sprite, it gets way, way easier by simply saying feel this, I didn't even write that. And in my HTML file, what I just need to do was this, which I wrote, this, picked up from the CSS from the Composite SAF and stuff. So, it's way easier, I don't have to be made this. If I can continue any other, I'll just get the designer, please, maybe, according to the social media, I don't have to do it, right? So, I just didn't even write anything, just keep dropping it. And my compiler was going to keep on combining new ones like this. And in this, like, with the Sprite impact that we see, that's pretty much it. And I even covered all the topics for starting out. If you're not disillusioned, that's what's my back. Different classes or same class? Same classes. I'll give that to you, but after the release, my idea is that you base class. Base class is like starting in the classroom, in the separate classes. And if you start writing classes, for instance, if you find separate equal state classes, state classes, message classes, for instance, if you have, you might get a lot of messages, either messages, notifications, write them separately in teams of states like Olovers, write them nicely separately, lay out separately for this header, write them separately in the file for the header, so that, you know, whenever you get a chance, you get a check from Olovers, straight away in a minute. This is one job, one particular job. This one is an asset, a package, right? I want that to have two teams. I mean, I didn't know why that's a business matter because I've seen there it's going to get everything. But I know what you're going to get now, right? Localize your classes or rewrite them or extend them. It's more like following your, yeah, this is what we're using for this. For smaller teams, smaller classes, start separating them into small classes that you can extend. So that way, if you want to get one there, the reason you're getting one is maybe you're going to change everywhere, but if you want to make a lot of changes, then there is a lot to come. If you're operating in some sort of way, why don't you put it back? Now, let's go ahead. How do you know? Nothing. Nothing? See. Pre-processors have nothing to do with this. They've been nothing to do with your browser because the client product, if you look at my HTML, there's no anything in the chat. It's CSS, right? It is already guaranteed on your desktop from my laptop, not on the server. It has nothing to do with it. One more beautiful thing. I'm just going to show you very quickly. Demo system. This is what we're working on today, right? All those shit stuff, right? We're going production. The moment you're going to go production, I'm going to stop the system. Boom. Let me try again. I mean, there are many topics. Compire, compression, CSS, and things like that. Look at that. Already compiled, nice key title note for you. It says about 30%, 40%, 30%, 30% depending on your success. How do you do anything? Compressed, compiled, ready to go. So, you may even say sometimes development running has to do, right? So, it would be a beautiful thing. But for you, the SNS OS in the server, requires this command and provides it for you to go somewhere. Right? Any question? Is there a way to describe using less? Using less? No. That's the reason why it was to SNS, right? No. What? Yeah, but when you use SNS, it won't use numbers. Exactly. You use that number. Yeah, how much use that number? What does that mean? So, it's not... What? That means there's no numbers. Yeah, exactly. There was a central fence, conference room governance, and it's active development. So, yeah, I was going to ask you, are you also going to describe using conference? Because I can follow everything, even the controlling thing, this policy, you know, what that means. Okay, look at conference and look at my interest. Okay. Yeah. Okay. Oh, here. In the main demo file, what am I doing? Am I supporting legacy IE-4s? Am I supporting IE-6-4s? Am I supporting IE-8s? With this small setting, even like in my display, what's the problem with my display in IE-6, or IE-6? You have to use that last page, right? So, IE-6, we support IE-6. So, when I start writing mixes and mixes and classes that have this inline display so that you can, like, just turn this on, say, through. Those are like, you have to read. So, I'm saying, I can even say support, okay, support Oprah. In all the dot-mores, dot-things, rounded corners that you see, Oprah will be all missed out. I can say, implement it. Microsoft, of course. SBC, Spark, everything. So, like, is it important for IE-6? No. I know this. I know this. I don't know. What questions? Is there a reason for using legacy support for IE-6? Can you support what? legacy support for IE-6? Yeah, see, by default this says let me support all of IE-6, IE-7, IE-8, IE-9, all those like that, right? So, I just want to show you. So, I wrote up this, so you're saying, let me know by default, but let me start supporting for my 8-on-1s. I can simply turn them on and start supporting IE-7 or IE-6. 3-point support for IE-6, support IE-1 for IE-8, let me support all IE-6. So, for people with rounded corners and things don't come up, but there are lots of other things which you really need to write up. I have everyone supporting IE-6. That's it, that's it, that's it, that's it. Any more questions? Most fantastic question of the day is coming to you in CSF. You can even write awesome awesome classes, if you don't write any inside classes in the audience. So, if I write in your CSF, it is only the one who should work with standards and properties. So, if you don't write, if you write, it will be neglected. Awesome, right? So, I think people write a lot of these things, right? If you want to work with me, I've been a professor of engineering, he can use PQ, he can use PQ, he will be compiled only that. I can write all the information, all the sort of variables, all the sort of announcements without having to worry about it coming up. So, I'm like a CSF, right? CSF, you figure out the lessons. The lessons are usually lessons that you have to work with. But, if you're using this, while in government, you use the less demonstrate, which is the thing that is done, all the compass app, right? Why is it not just for less? By the way, this father's app is similar to Mac, Windows, and Linux. So, no, it's useful because that's why you use it. Yes, and also, I don't remember the name, but why do you have the less app? Yeah, 4K, 4K is there? 4K is there? 4K can it do that? What do you think is more good with a unique system? So, you're asking that question to a guy who uses Mac, and I haven't had this window since 2005, so... But that's your personal choice. Do you think you can use Windows? Or are you okay? By now, it's all you need to sort out both combos also. Again, it's our problem. The only thing with development is that, unless your only green design was to be able to use Windows, you started to directly control the load, even if your ITSS is jammed. Macs and Linux seems to just jam. It simply just works right there. It simply just works. What do you think? That's all I just wanted to call you, to call this question. The mix-ins, when you say, I can do it with a Mac, I can do it with a Mac. Why do you want me to do it with a Mac? Because it's all you're doing. That's why I told you about the mix-ins, when you buy a Mac. Yeah. So, unless there is no Mac, you can say that this problem is not there. Yeah. In this, another confusing thing is, Macs are also like, I said, got something. Yeah. It's not an easy question. It's not an easy question. It's like writing a, it's like writing a build, but you don't use it. It's a reason to assume the inclusion relationship between the team and the team. So, in CSF, what Compose and SAP does, it's making a team for you. While your mix-ins are in like a build. You can have some of them, or you can have some of them. See that, and things like that. If you use a move, you just use why something won't include and use it. So, it's not an easy question. Yes. I must understand this. So, the team Compose, Compose and SAP is combined right here. So, Compose and SAP is kind of the same. The report includes the mix-ins and SAP. And then Compose and SAP. Mix-ins are, yes, one of the complementary. I see. All right. What's the problem with the bottom line? What's the bottom line question? What is the question is that, we have to write, I don't take it from the technical board, not the user's. Why do you want to write? What's the bottom line? What do you do with it? We use, we call that mix-in. We use? Yes. What is Compose and SAP? Compose and SAP are combined right here. This is very quick, anyway. What do you want to do? More questions? How do we get to use it? Answer. I already have a question. So, if I was asking this, if you have folders, like, what's the task? This is the execution right here. Is that some new, in fact, it's not going to be the same. It's going to be class. It's going to be written. Getting or restarting. Getting on? It's waiting on. Can we go to somebody here? Yes. Can you hear me? It's like a same-worlder game, where you report it to a spring saying. And then, it says, time's up.