CSS Preprocessors Getting Started | SASS and LESS | Practical Examples

Key Takeaways

everyone eyes of all they were doing welcome to a new video tutorial on and Channel I know it's actually so in today's one I'm bringing you a very very nice topic and gonna talk about CSS preprocessors or pre compilers so if you have been like a new to the web development field and you've been like hearing a lot of guys out there a lot of people talking about the CSS preprocessors or if I've heard about sass or less or something like that and you think like confused about them what are they and why they are very important and why like every single project modern project right now is using such like a preprocessor pre compiler for on on a CSS so why bad and why it's so so important so we're just gonna dive into that and just gonna explain what is it so let's start but as you see this like slideshow to make understand better so what is the CSS preprocessor or pre compiler a CSS preprocessor is an advanced CSS language so like you you know the CSS language parts this process is gonna gives you more features than you do on a normal CSS so we're just gonna extend the original CSS language and add more features more I don't know more things to that language to make it a little bit easier and simpler for programmers for us actually and for designers to work better and reliable and faster so as you can see gives you a flexibility to use more features than and radial CSS like a vanilla CSS so anything irregular anything original official is called like and vanilla so you know compiling alter CSS needs some kind of like software or something like that to give you a wrinkle CSS so when you create that pre compound or like the the unlike free compiled CSS so we need to compile it I'm sorry you need to compile it to move on into the normal CSS so you've got Li the style the new style shared is like two things like the sass and less like the most like famoust ones there's a lot more other ones but this like what people use like mostly and what you need to use for nowadays so either sass or less I'm gonna go recessed visited tutorial so we need to compile the file into a normal CSS then include that almost esse to your project can work with it like normally that's why it's called a pre compile it's not a compiler compiler works at runtime but a pre compiler is gonna just take that pre compile it and make you give or give you some kind of like a CSS file then you take that file and give it to your project then it's gonna be compiled again so you know how that actually works so as you can see there's two famous processors they sass LS and it has a lot of features including variables and here are the styles and very clean and killed so that's why a lot of people use it if you like trying to know what is why people actually love that that much just keep watching that video isn't gonna give you a real-world examples and just gonna start well like how to compile it why while using that method rather than the only one and just try to include or some kind of like an HTML example using that language and like oficers or versus using normal CSS class so moving also so which should I use I've talked about sass and less well there's something like how to choose a boss like like always the newbies so we fearlessly say if you're new to web developer or web development field and like you've been saying what what should I go for sass or less and you've been like for that for a really long time well this like something very very clear about that both of them are pre-processors for the CSS and both of them are very powerful very clean very fast and very quick in compliation or precompilation they work pretty much fine but there's some kind of a features and basements so as you can see here they sass which like based off some tasks we all some style sheets and it's based on ruby so if you are familiar with ruby the programming language based on that that doesn't really mean that you need to use ruby or something like this but just based on this widely use it on modern wear up so by the most famous thing is sass right now like SAS is taking about 68% of the web development field block vendor less and it's backward compatible which means you can use the compile thing as a sass or as a CSS and also a powerful working community so if you have any problems anything you want to learn new of all that sand stuff like this just go ahead and push you come and sucker for something this you're gonna find here your answer over that so less linear style based on JavaScript by now it's not Ruby less is based on JavaScript no James and that why they use access and just also backward-compatible so like as you can see they are actually the same thing they have the same features nothing more than that only the sass is wildly used and stuff like that but they are based on Ruby and the other one base is JavaScript on MDS and that's it so yeah for this video super toy we're gonna choose sass because like for most reasons a lot of people use it the second one I've been working for sass for a really long time for now and that make it easier for me and also I like SAS so yeah so I really want you to use SAS why not you can go for less I'm not saying do not go for glass or something like those BOTS yeah you can choose both of these you can go for less then the same thing only the syntax differs from one to another but it's only a matter of syntax just go ahead to learn about the less syntax you can watch the SAS series or something this and you're all ready to go awesome now let's move on into so let's try to set up now and use sense will have else is like you mean the oxide community and stuff like that and as I'm saying to you gonna use SAS for a bit less on this particular tutorial and also there's like a features are gonna talk about on this video tutorial here they are there might be a lot of more features than there was but those are the main and why developers people to use a pre compiler language rather than going with a vanilla CSS so well the main features of pre-processors are here that you can use variables so ever yeah if you have ever heard about variables on a CSS here they are with the pre compilers are like possible and that's like as well as can tell this is the main feature what people like you process rather than regal ceases because they can define their own variables and we use it over code over there actually over there application and just like make it easier for them and simpler to reuse the same code over and over rather than we type in it and stuff like that it's very very nice feature also this is nesting so if you're familiar with HTTP hierarchies and nested children and parents and stuff like that on CSS or processors which in this case is gonna use sass I'm gonna talk from Nano and using sass so which in sass you can use for nested that so you can put the child into the parent elements and stuff like that in order to make styles and stuff like this also you can import stuff if you're saying now on radio CSS you can import stuff it's not pretty much the same because we put in here is a lot more optimized than on a regular CSS because it just gonna takes all the files put them together on a single file and whenever your application is running it is gonna send one single HTTP request relevance and in a lot of requests depending on how much files you have for this particular stock so as I've said it's way much more optimized than easier for you to use and there's also operators you can use the I don't know sometimes operator or to buy something like that if you want to calculate the width or something this you can also use that which is pretty pretty cool and pullled layouts and stuff and also you can understand that using heritage which you can declare a base style something map then you can extend from the other elements extend over that to the yes actually base style and use it over and over and add more features to it and stuff like that which is pretty pretty good so now let's just go ahead and jump on creating something this I have a real world example I'm just gonna jump right into it and also I'm gonna tell you how you can all show you how we can a pre compiled or compile the sass language into a regal CSS and you use this or include this into and unlike a web application project so let's just dive into this so actually as you can see you we have the application we're gonna work or it's not pretty much an application just a very very basic example just an are gonna have four item containers I'm just gonna show you how you can use the power of SAS in order to make these containers looks prettier awfully and less code and much easier for you to read and recode over and over again so this wasn't the final page or something because we're gonna see boss we're gonna need a couple of things first to start with so it's gonna see if you can go to quality - da da da calm I mean and this is the compiled looking at you is there's a lot of compiles author you can he use you can use like CLI and command-line interfaces to compile the Sansa to rego CSS well for me personally this what I started with when I saw the Batman so koala was my first think I've used and it's very nice vertical again very fast and everything concerning a good thing you can you can try koala over here so go ahead and try to download it dollars for its close pass for Mac OS X Linux up into whatever Windows just downloaded and install it tells about like eighty makes and stuff so just try to install that I've already done this and one thing I wanna mention about that since we're gonna use the display flex in here I have a full video tutorial explaining the Flex design so just go ahead and I'll go search for flex design maker or you can actually find it be the link in the video description below and you can learn about flex box design and how it can make your life way my much easier in here and now after installing that making everything sure and you can open up a project so you can see how background check in here I've set it up it's all it does it has a distribution folder where we're gonna put the index dot HTML we're gonna have just toribio as index.html so I will just show you that just have a body and the containers or item one item jointers before in the container just the parent for all of those items I'm just gonna have an s4 see that massage see also the outdoor as CSS Tanaka CSS so this how you refer into a SAS like CSS file so not a regular do not name a CSS name it as CSS and here just just an empty folder and in fact a this packet of JSON node modules are from no genius pressure to know that so this is like the project this is what we have over here and as upset what we want is to make experience so if we go back into the up dog CSS and take a look it's pretty pretty easy to know we have item 1 all of them share the same style in here if you can take a look in here all of them to have the same box shadow have the same pattern and stuff like that I'm gonna see how you can make this easier and the container it uses just a flex with hundred percent and just space and evenly so you can just give them space between the elements and the items are stuff like that so this is the basic thing we have now let's just jump right into a koala so ask you see you have koala line here if you can work with koala quality doesn't it doesn't like clothes at all and just gonna go into the task bar stay there if you really need it now after open up koala make sure to open it and you need here to go to the plus sign add folder and add your style for us you can see have here and do the SRC so I've gone and through that and I found the SRC us can see SAS app distribution or SOC and I found and click OK and that's it this is all about that make sure to include it and after refreshing that it's just gonna take you or give you the CSS or SAS files that does exist in that in that case and having only the outdoor s CSS as you can see here and if while like when you compile that you want output to the irregular CSS the vanilla CSS file and you need to choose where to output so you can see this little icon in here you can press it and it just gonna give you where to put that put it into the out distribution for this flash and I've just naming it up doe CSS make sure to name it opto CSS not up top as CSS so just put it right there and you are good to go so as you can see placing this diffic you can choose your path in here depending on your project but this is mine so you need to choose the output file and that's all so if you can just click that it's just gonna give you the properties of your file there's an auto compiled or you can remove it on just toggle between that which means whenever you do change it like something into the up top CSS so if I change that and save it like change something like from 0 to star or something this and save that it's just gonna auto compile this for me and create a new up top CSS in here automatically for me which pretty pretty good if you try to make something bigger than a regular example if you have here and just a couple other things like the outgo silo the compressed and stuff like that doesn't really matter but this is the basic setup that you need to do so all of that into the quad you know just to me that some qualities in the top tasks just about up down with it so let me just go ahead and do the item here and after save me that you can tell that it just gonna automatically do the apt or CSS make sure to go into the index.html and under the index.html makes you think for the app dot CSS so dot /opt of CSS and code your style sheet into that and here after that we need to open up the Styles stuff sorry just close my things okay now opening the as you can see I have only four containers item 1 item 2 item 3 and item for all of those are using the give with the class container and I just died from the container web display flags 100% for the both height and width and justify constants this is what I was talking about all the Flex design box and stuff like this so yeah very basic and very elegant now what we want since they share the same box shadow and padding why just keep repeating those like over and over and over and over here why just don't go ahead and just create something like your variable for them and just put them to them so well you can do that so we go ahead like for example box shadow and you can put this like both shadow and for the Box shut up with a little box shadow okay then you can include as you can see how we create a variable here using the dollar sign on prepend in the dollar sign and giving it a name then giving it the value so this is the key and it is the value and how does it know that this is gonna be a variable because we are assigning a dollar sign at the beginning of this variable so to declare a variable just $1 the beginning so this is a variable and all you do here is just go ahead and reference that using box-shadow so as you can see here we go if we just control as Savior and just gonna compile this as I've said automatically for us to control our doesn't really matter I just can see the box shadow in here stays the same it doesn't go memorize because here we're calling the box shadow in here and everything is working fine if you go take a look under the up top CSS as you can see here we have the box shadow as the other ones or since we are encoding the variable so it's variable gonna replace that so we're just gonna take that value and put it over here so this is end of the compile time takes the barrier the volume and put into whether the variable is being cold and that's it so this is all it does like with variables and stuff you can clue that but it isn't like that much how much beneficial for us what I want is to make or do a background color so we want the item to enlighten like item one am I to to share the same background color it's gonna be green and the last two one's gonna share the same color as well which is gonna be a blue so how to do that is using it the perfect way is usually like your variable so back let's say back green and I'm just gonna give it the green value I have just sad about the hash our the hex follow for that I'm also here like blue or back blue back blue and we're gonna give it the other blue value thing here they have just brought before recording or before starting this video and here's the back below now we can do is just very basically using the background - color and we can give it the back green we can do the same one for the second item so since they share the same one the perfect way is put in a variable up there and here we can also check that back blue and over there as well not control else as you know just gonna want to compile it with us doing back refresh and here we go as you can see rather than take the green of item 1 item 2 as well as the item 3 and item 42 the blue background as you can see this how variables works and how we can make your life way much more easier than you think so just by coming to variables referencing them under the show the item styles or the containers times and you are ready to go so this is about variables also there is like the other really nice think about that let's say that we have since you can see the container is a parent of these four child's so if you go into the HTML we see the structure of that is the container is holding the item 1 item 2 item 3 and it--and for like 4 of them are belonging into the container so instead of math using nesting we can put it the same structure away in hip which means you can put this is like the parent container and before closing that we don't close that let me just move those up over here just to make it looks a little bit clean and before closing that what we need is just to close it down here save it and as you can see all of them are under the container so those are into the container cause the health child of the container where the container can have his own style also the item 1 item 2 item for Joe item 4 belongs into this container which is not a child so we can just include them or nest them like that so like an hierarchy in the index.html like pretty much the same thing here this is the parents and those are the child or the children's and this is the parent and those two children's and here we go so this is how nesting works and what is actually pretty good about that if you have some kind of another HTML elements that using the same classes this and you are defining the class end or like appearance only the container here and the other elements let's say that doesn't have a container it does have something like a container or two or container three it doesn't know about the item one class at all so if we try to use it it won't give you the same style he won't give you the same background and box-shadow and padding it won't know about the style anyway because this is belonging to the container unless it is into the container parents or it won't work so it pretty pretty good now you can take a look on that as well just refresh and the same thing nothing happened but sure because you haven't changed anything but I was going to see it still works pretty pretty fun so this is like how nestea or nesting things under the CSS the same thing as a hierarchy and someone else it's pretty much really really good thing to do also the other thing as you can see in here we still have in the padding and the box shadow on all of them so all of them share the same thing why we can keep it keep it actually keep repeating that what we can do is like create a base class and go ahead or not go actually class a basis title and go ahead and do this items and extend from that style so we can grab the style and extend from all of that into into the although items so we can share the same thing while leave if they all have the same padding and the same board shadow and solvent so what we can do is just going into her and create like a base front so for that what we can do is just e using extend and he was gonna create a base class or pretty much not that extend we can use it using a percent so the extent when we try to extend from it and here to declare the base class you give it a percent at the beginning and then you give it the name let's say basic item or base item some like this okay base item and there's gonna be the base container or the base element or style for all of the items and here we can take just take the burning and the ball shadow up here and remember the box shadow takes the variables real which is pretty good so here we're using both of these the variables and we are be using all so the extent or the base class and now that you've include the base item or to make the other items like get extended from the this base item style all you do is just using the keyword of in like extent so here we need to override that so we don't need them and what we need is just to extend except from what I'm just gonna give you the base I to make sure to use or still using the percent I'm just gonna use face item and we can just do that for all of the other ones here there okay this is how you can tell the auto item to extend from like a base class or base style year and just using the exact keyword art extend and make sure to use the type percent and you are good to go so here if we just stuck save that just gonna automatically compile for us and refresh and as you can see we get like a really nice thing the same thing doesn't doesn't actually mean anything change because we extended for that and they'll all have the same pad and also they all have the Box shadow which is a very point here which is pretty pretty good now what I also want to show you it's a part of the extending and inheritance is Maxim's so Max's work like pretty much like a function so if you're not familiar with functions and program language is you're passing it up an arguments and it's just gonna return to you something in this case you're not going to return but it's just gonna apply a style to this particular item you can apply to so here you how you declare that is just gonna like you say Maxon like this I need to give it the name and here for the name we're gonna give it something like let's say we're gonna apply a border differently for like apply different border colors and let's say here your border color so each item gonna have like a specific border or eat meat border color and you're just gonna say border for this border is gonna be like about five pixels solid and just gonna use the border color then going to pass in and here whenever we pass in a protocol it's just going to be applied into the border and whatever we call that water is just gonna be applied to the item we're gonna call it into so here using the include so make sure to use the include and say we're so just gonna say order and you give it which color you want let's say since the item one uses the background color of the green here you can use back back blue and we can use the only one the item she was walking passing in the blue background color in order to show that pretty significantly and here you can use the green since they use the like the blue background color so green and so the other one should use green so yeah that should pretty much work so all it doesn't here just gonna call this function in this like gonna apply the border into the item we have assigned to function to or the max and to and so likewise applying the color we want or the the other if arguments we want so you're just gonna apply that is very gonna use it's also border color of radius so it just usually include statement like prepended bats and say in which one you want and make sure to use the maxine in order to define and maxine of the and also make sure to define that before you call it because just gonna give you like an undefined where error on a wheeeeel error that you can extend so if saving a coming back in here and as you can see we've got like every single one has the border in here so those have the same one color green and the other ones have the blues is you're applying the border to different things you can also like let's say I wanna in here we have a panning what I want is just override back panning for a specific item one item so let's say the item one wants have more padding than the other so you can just override that make sure to do that after or like after calling the extend so when you call extended make sure to do the extent always the first one to make sure to do with then you can overwrite any data is under the X ten or eight under the base class or you can override it on your item in here so let's say I want to just do a fifty pixels or something like this just gonna be over either for us successfully you can go ahead and refresh and as you can see we get like special padding for this item one one the only ones still have the same that in here so this is like the basic things about SAS all those like variables vaccines and carriages makes you like way much more easy to use that so if you have like a lot of codes and way like much code and also you're developing a big scale project or a big scale our application this gonna benefit very beneficial for you I'm pretty sure with that also typing this looks pretty pretty good and really nice and also it's some modern things so that was actually guys for this tutorial well finished the SAS and I've talks about it that was it it's all of that is SAS doesn't have that much things there's some kind of other features minor features but they are not that important this is the important thing you need to know before sign using self so fingers watching I really really do hope you enjoyed and I will catch you for sure our next video tutorial