Less CSS Pre-Processor Tutorial

Key Takeaways

hey what's going on guys welcome to another crash course now I've been getting a few requests for more front-end web development videos and I noticed that I don't have any videos on the less CSS pre-compiler I do have a few on SAS which is very similar but I wanted to do a video on uh how to get less installed and start to work with the features that a CSS pre-compiler offers all right so if you've never worked with les or SAS and you have no idea what a CSS pre-compiler is don't worry about it it's it's actually really simple to learn and just by watching this video you're going to learn all the basics and fundamentals all right so basically a CSS precompiler extends the normal CSS syntax and it adds a bunch of new features okay which include uh for instance the ability to use variables in your CSS which is really cool just that alone is a reason to learn less or SAS you also can use mixins which are similar to functions nested elements and a bunch of other stuff okay so it gives logic to CSS now there's a bunch of different ways to get less up and running there's programs like winless which is a guey program that you can install on Windows and run but we're going to take the the best route in my opinion and that's to just install less using npm or node package manager okay so you do need to have node.js installed if you don't just go to nodejs.org and download and install it all right so this this video is going to be completely crossplatform I'm using Windows but it's all the same on Mac or Linux just again make sure you have node installed so this is the the website for Les it's Les css.org and this gives you um kind of an overview of of all the different features it also shows you um how to install less globally which is what we'll be doing how how to work in the command line um you can also use it on the client side as well uh now the less uh module that we're going to install this is the GitHub for it okay so all we have to do is run npm l-g and the DG is to install it globally which means that the less command or the less C command will be uh accessible from anywhere okay anywhere in our system um now this alone doesn't have a watch option what I mean by that is so we we can run it and then have it just watch our less files and every time we make a change and we save it gets Auto compiled into regular CSS for that we're going to need this okay so this is um dead simple less watch compiler and this is also installed uh using npm and you can see less is actually a prerequisite so we have to do both of these all right so let's go ahead and get started I'm going to go over to my command line I'm using Commander for Windows U but you know you can use whatever you'd like um even the basic Windows command line or of course your terminal in Mac or Linux so let's go go ahead and say npm install DG less okay and I already have it installed so mine's going to go really quick or at least it should all right um so we have that installed now we want the less watch compiler so let's do the same thing npm install DG and latch compiler okay and that will also install globally all right so let's create a folder to work in I'm going to say make directory and I'm just going to call this less sandbox actually let's do less underscore sandbox all right and then we'll CD into that okay so what I'll do here is create a less file okay so actually you know what I'll just open this in atom which is the text editor I'm using of course you can use whatever you'd like and you can see by doing adom Dot it opened it up in this folder so let's go ahead and create a file and we're going to call this styles. L all right and then let's just put a simple body in here and we'll just set the background to Red for now and save it now this is a less file we can't just include this in our HTML we need to compile it down to regular CSS all right and that's where the two things that we just installed come in so let's go back to Commander and if we just run less C which is the um the less compiler and then we say style or styles. less that's basically just going to um it's going to compile and then just send it to standard output which is just what we're seeing here in the command line if we want to create a new file and compile all the all the less to CSS then we could do less uh L C styles. less and then put the file name we want which will be styles.css all right so it took this L file compiled it into this CSS file okay now these are the exact same because we didn't use any anything has to do with less in this file so what I'll do is in the less file make sure it's the less not this regular CSS file I'm going to add a variable so let's say at you need the symbol for all your less variables and then we'll say background oops background color and we want to put a coal in here and then let's make it a a light gray all right and then we can use that variable anywhere we want so here we'll say back ground color and let's save that and then again let's run less c styles. l styles.css all right and now if we go and look at the CSS file you'll see that it's just background and then that light gray okay it's not using it doesn't show the variable because well you can't do that in regular CSS now this is just the Les C if you just have that installed I mean you can do that but you'll have to run this command every time you want to basically recompile your less into regular CSS um that's kind of a pain in the ass so that's where less watch compiler comes in all right so let's go to that GitHub all right and then let's see we have the usage and we do we can do less watch compiler and then the folder we want to watch and then the folder we want to Output all right so let's go ahead and create a new folder called less and I'm going to close these up and let's delete the regular CSS file because we don't need that and then styles. less I'm going to move into the less folder all right and we'll keep exactly what we have there and then let's see what happens if we go and run less uh what is it less watch compiler and then the folder that we want to watch which is the L folder and then the folder we want to Output which we'll call CSS and it should automatically create that so let's run that and you'll see now there's a CSS folder with styles.css and you can see that we get the background the gray background all right so it automatically names the CSS file whatever you have for the Les file okay now notice that it's all on one line that's because by default it's minified now if we go and take a look at the GitHub page there's actually some configurations that we can set all right so right here uh we can create a file called Latch compiler docon do Json and include some options so let's go ahead and do that we're going to put it right in the root folder here so this is going to be less- watch- compiler do config do Json all right and then let's go and grab this stuff here and and let's see so we have allowed extensions so this makes it so that it's only going to look at less files okay extension. less minified is now set to false Remember by default it is minified but I'm going to set it to false Source map will be if you want to generate a source map or not we'll keep that to false and then we can also specify the watch folder and output folder so that we don't have to type it in every time so we want this to be just less that's the watch folder and and then the output folder is just CSS all right so let's save that and let's keep what we have here styles. L and go back to our command line and now we're just going to we're going to do contrl c because it's actually watching the files right now and let's just type in l Das watch- compiler all right and it's automatically watching the less folder Okay so we go ahead and change let's say we change background color to uh let's see we'll just say red and save that it automatically gets compiled if we now look at styles do n that didn't why didn't that change oh you know what I didn't have the right file opened I had the one that's in the root open styles. L that shouldn't even be there all right so let let's go and change styles. L to red and save and then go to Styles CSS and you can see it's red now all right and it's not minified anymore because we specified that in the configuration file all right so what we're going to do now is create an HTML file so we can actually see some output so let's say new file and call this index.html we'll just add some basic HTML tags in here for the title I'll just say less sandbox now we need a link to our CSS file all right so let's just go over here and say styles.css okay make sure you use CSS and not less and in the body I don't know let's put an H1 here we'll say less sandbox and then we'll put a paragraph now in adom you can type in laurum and then tab and it'll just put in a bunch of dummy text here some laor ipsum uh I think you could do it in Sublime as well so we have a heading and a paragraph uh let's go ahead and put a link in here as well so I'm just going to wrap some of this text in a link and let's end that right here all right so we'll save that and then I'm actually going to open it using my adom live server but of course you can just open it right on your file system uh and then it looks like this which is horrendous this um so let's go back to the Les file and we should be able to change this variable back to a light gray and save and remember it's watching it so it's going to automatically update and since I'm using the adom live server I don't even have to reload the page now if you want this adom live server you can just go to settings and go to uh install and just search for Adams Adam live server and then enter and it's right here it's the one by Jazz Chen all right if you're interested in that so what I want to do now is just add some variables here so we just put a comment in here we'll say variables and let's add in addition to the background color let's say font family and we'll set that to let's say tooma all right and then let's add a primary color all right like when you use bootstrap you have the different classes you have the primary color which is is usually Blue by default you have success which is green default which is gray and so on all right so let's say the primary color we want to be it's going to be a blue color it's actually like the Facebook blue so it's 3B 5 998 all right and then we can also set a secondary color and we'll set that to a greenish color which is going to be 20 B2 AA all right and let's see let's implement the font family into the body so we'll say at font family and that should make it to H and let's see let's save that okay you can see that's the font changed and so on um now you can also do arithmetic in in um less so let's say we want to set the line height and I mean this doesn't really make sense why you would do this but just to show you you can let's do 1 M and we'll do let's just do 1 m + 1 M all right and then we'll set that to the line height all right save that now you can see uh it's two if we look at style CSS that's what everything compiles down to all right so now what I want to do is work with the primary color so I'm going to create a class on this link that we have here so let's give it a class of primary Das text and then I'm also going to create a button and let's see we don't need any of this stuff we just want a class and I'm going to give this a class of primary uh let's do primary Das BTN all right so we have this link which is primary text the button is primary button now we'll go to our L file and let's say dot primary Das text text and let's set the color to primary color and let's say primary dbn and for this we're going to set the background to primary color all right so let's save that and if we look now we have that Facebook blue for the link and for the button all right now imagine that you have you know 20 30 of these buttons around your website instead of going and changing each one separately you could just change this one value and it will iterate throughout your whole application or your whole website which is awesome now another thing we can do is we can extend uh classes or or extend Styles so for this primary button let's go right above it and create a class called BTN all right and for this BTN class we want let's say padding we'll do 10 pixels top and bottom 15 left and right and let's also take the Border away all right now of course you could go into your HTML and also add button here but what Les allows us to do is extend this okay so we can go down here and we can just do colon extend and then pass in the class which is BTN or ID or whatever it is so let's go ahead and save that and now you can see those are applied and let's just make that text white for now for the primary button and I'll show you later how we can make that Dynamic now we can also create mixins which are basically like they're kind of like functions um what we'll do here is let go to the bottom and let's create a style called or a mixing called border bordered and we're going to set a border to the top let's say we want that to be dotted and one pixel and black and then we'll also do border bottom and for that we'll say Solid 2 pixels and black now we can apply this to any so let's uh let's actually create let's do H1 and for our H1 we'll do bordered so we'll save that and now you can see our H1 has the bordered and let's actually put another heading in there we'll put an H3 under the button and I'll just say hello world okay and then we'll just apply right here H3 and that'll also get the bordered all right uh let's see what else let's look at actually let's look at mixin with parameters so I'm going to create another one down here and let's call this border Das radius all right and then this can actually take in a parameter or more more than one if you want uh but we're just going to have one and it's going to be radius okay and it needs this because it's it's a variable so let's say border Dash radius and set that to whatever is passed in okay so let's go to let's say uh BTN for the button and we'll say dot border radius and we can pass in a parameter let's say 10 pixels save that and now you'll see the button is rounded if we wanted to change this and make it even more rounded we'll change it to 30 and you can see that applies all right so your mixins can also have parameters so another thing we can do is Nest elements so what I'm I'm going to go to the HTML and create a ul and let's give it a class or actually let's give it an ID of menu all right and then in here we'll have our lis and we'll have oops we'll have our link and let's just say link one link two and Link three all right so simple menu now let's go to our L file and let's see I'm going to try to stay away from the bottom just to make sure you guys can see this so let's go right here and we know we have a UL with the ID of menu all right so let's say for that we want to say list style none we want to get rid of the bullets and then we want to style the LI now normally what you would do is UL menu Li so it' be a whole different style but with less we can just we can Nest these elements just like we do in the HTML so in the HTML we have all the Lis are in the UL and the a tags are in the lis so we can set up our CSS just like that so let's say Li and for this let's just do padding 10 pixel 0 all right now this is only going to apply to the Lis that are in here okay because it's nested in there and then let's say for the a tags those are inside the LI so we could put that right here and let's just do color and we'll say secondary color and let's also get rid of the underline decoration we'll set that to none and let's say we want the hover what we can do is we can just use an Amper samp and then a colon and then hover okay instead of going down here and doing a hover and and all that stuff all right so hover let's make the color uh we'll just make it black all right so let's save that and now you can see we have the styling we have the list style none on the UL the padding on the LI uh the color and the text decoration on the a the a tag and then black when we hover over it okay so you can Nest any Styles you want um you could actually put for instance uh the H1 and H3 you could put inside the body if you want it's all up to you on how you want to structure your CSS all right so what I want to do now is I want to look at some functions so if we look at the documentation here we go to function reference I'm not going to go over all of these but you can see there's functions for strings for list there's math functions um all types of stuff what I want to look at is the I think it's in color definition or color channels where is it color operations right here so in color operations we have this lighten and darken functions and these are really cool because you can take a color for instance the primary color that we have up here and if we have a certain style where we want that to be darker or lighter we can do that so what I want to do is go down to the UL menu here and we're going to go right here and give it a background color so we'll say background color and we're going to set it to secondary color all right now if we save that it's going to give the secondary colors the background which is the same color is the link so we can't even see the text so what we can do is we can take that lighten function so we'll say lighten and we can pass in whatever color we want in this case secondary color which is that green and then a second parameter of how much we want to lighten it let's say 50% and now you can see that it has that color but it's lightened so that we can now see the lengths all right and you can do the same thing with darken now you see it's darker all right so I think that's pretty cool uh and then the last thing I want to show you I'm going to keep that at lighten the last thing I want to show you is if we look at this this button right here we have the primary color as the background which is that bluish purplish color and we have the text manually set to White well if we go and we change um let's change the primary color to something lighter um let's just do 3C and now it's a lighter color now this would probably look better with black text okay especially if this was even lighter and instead of setting it manually we can create a couple mixins that will look at it it'll see how dark or light the color is and then apply the correct um color of text all right so let's go right here and we'll say text color mixin all right and then let's call it we'll say dot text color and then it's going to take in a parameter let's say at a and then we'll say when and then the condition so we're going to say when lightness and then pass in that argument there when lightness is greater than or equal to let's say 50% then we want to set color to black all right and then we're going to just copy this and put this right here and then this is going to be the same thing except it's going to be less than 50% then the color is going to be white and then down here where we manually set the color we're going to get rid of that so um yeah we actually just want to get rid of that whole thing and then just say text color we're calling the mix in and then we want to pass in the color of the background which is in this case primary color all right so now let's save it and and reload and you'll see that the text is black now if I set it back to the dark blue and we save and go back uh let's see that should be white what did I do wrong here oh I'm an idiot I put quotes around these shouldn't be quotes all right let's save it and now the text is white okay so it's going to see how dark or light the background is and reflect that uh what the text should be all right guys so I think we're going to stop it here that's pretty much it for the basics uh if you want to go deeper of course you could look out I mean you could look at every single function that's available and all that um but as far as the features that are available we covered pretty much um what you need to know to start using it all right so maybe later on down the line we can create an actual theme and Implement less so thanks for watching if you guys like this leave it a like um you know subscribe if you're not and also follow me on social media I have my um Facebook my Twitter and Linkedin all that stuff's on my profile so I'm trying to get as many people to follow as as possible so thanks for watching and I will see you next time