4.2 LESS

LESS is another very popular CSS preprocessor, just like SASS. So hopefully, through this video, you will not only be able to see the similarities and the advantages of using a preprocessor, but also the slight differences with SASS. And depending on your preference, as well as your current project, you can decide, hopefully, much better on which CSS preprocessor to choose. Briefly, this is the LESS CSS.org. The official website for the LESS preprocessor. And, once you keep scrolling down, you will see that the navigation bar will appear. And, if you go to the language, this is where the syntax will be very well explained, as well as the relevant CSS output. Also, along with the main website, do check out the GitHub repository. All right, so let's get started with LESS CSS preprocessor by firstly, installing it. To install LESS, we use NPM, the node package manager. And usually you can just do a global install for that. Now once you have done that, you should be able to query less, so let's say, npm info -g for global and less. And, here it shows that I am using the latest version, which is 1.3.3. So, let's get started with using LESS. And I am inside the folder which is empty except for one file, style.less. So let me open this up in Sublime Text and I'm just gonna input a very simple CSS. Notice here, LESS syntax can easily be compiled or rather you can put in CSS syntax as well. All right, so now once that's done, how can we convert it to a CSS file? So once we comeback to the command line, the command for the compilation will be less and then style.less, which is the input file. And then we put the output file. For our case, let's just do style.css. And once we do that and come back to our command line, there you go, the style.css is compiled for us. Obviously for now, it looks exactly the same. Just like SASS, the previous video CSS preprocessor. We will explore many properties that can help us code CSS faster, better and in a modular way. Now, before I move on, along with the command line that we kind of explored in the previous video as well as a little bit now. I wanted to introduce you to this application called CodeKit. Now, if you prefer some kind of GUI, CodeKit is an excellent application. It will not only compile our LESS files, but also the SASS and eventually, in future videos where I will cover Stylus, Haml, Jade, CoffeeScript and many other such preprocessing languages. So, let's get started with CodeKit. Firstly, I will create a new project. So, I'll go to file and then, Add Project. In this case, I'll just choose the less folder on my desktop and it has kind of detected two files. Now, I do not need this file, style.css. So, I'll just hide this file for now. And, if you right-click style.less. And, let's set the output path. And, let me just create style.css on the same folder, less. So, Select. All right, so now all we have to do is just continue coding. And, each time, upon saving this file style.less, a style.css will be created. So, basically, it's some kind of a watcher. So, since CodeKit is already running in my background, I will just keep on coding in LESS syntax, and we will immediately see the CSS syntax here. Now, it is important that when we are first starting out with a CSS preprocessor that we see both the preprocessor as well as the CSS. If we notice that the CSS compiled is kind of churning out more code, we definitely have to refactor the preprocessor. And in this way, finally, eventually you reach it at a stage where you don't even look at the compiled file. But, for beginners, I highly recommend you to look at both the preprocessor as well as the final compiled file. Firstly, as usual, let's go through the comments. So, this is a silent comment. This silent comment will not be output, but, if we go ahead and create a normal comment, it will come up in the .css file. This should definitely remind you of the previous video in SASS and how similar the syntax is. Let's move on to explore variables. Now, obviously, when we code in this way, it is not that dynamic. So let's explore it through variables. In LESS, we kind of define variables with an @ symbol, so, why don't we say @gray and then we pass in the value 444. Of course, now, if we replace every instance of #444, and this will basically be our compiled file. Now, LESS takes it one step further and we can actually have a variable with a variable name. Now, you might wonder, how is this ever useful? Now, let's say one day, all the base colors become red. In this case, if you, kind of, come ahead and replace this with red and you will have the hex number for red. But, guess what, when you're reading the code, this is definitely not a good way. So, let me just go back to, just, #444. And in this case, I will define another variable called text. And over here, I'll pass in the variable gray. So, every time there is a text, it will basically call the variable gray. And now, how do you pass in the value? In this case, we'll put in double at sign and then text. Now notice what happens, and now it is still 4444, but let's say the designer comes back to you and say, hey, I have a new shade of red now, and all the text will be red. All you need to do is just replace one line, and say that it's red. And, once you come back and see the compiled CSS, yep, it will be red. So, this is a very useful property of LESS. Let's go on and explore what our mixins are and how we can use it in LESS. So, using mixins, you can actually just define it once and call the mix-in every time you need it and the exact code will be replaced there. So, let's first create a very simple mixin and I'll call it spacing. This spacing will basically include the same one that we desired which is padding 0 and margin 0. Now, how do you call spacing? You can replace every instance of the code that you want to replace with just .spacing. Notice here that it will be replicated. Now, what if you want to pass in a parameter? Let's say you pass in variable space and by default, it will be 0. So, if you are using the default value, you don't need to pass in any arguments. But if you are if you do want to pass in an argument, you can pass in one parameter. Of course, in this case, we will just replace the space, and use the argument in the definition of the padding and margin. Now, notice what happens. Yep, when you did not include any arguments it will fall back to the default, and when you did include an arguments inside the bracket, it will be basically taking the arguments. So, that is a little bit brief about mixins. Now, LESS also takes mixin a little bit further in terms of pattern matching. So, notice here, I have very similarly defined another mixin. And it will also take in an argument called length and this is actually a switch that will be happening, so if we declare the nmx-in is bigger, then guess what, it will times it by 2, and if it is smaller, it will divide it by 2. I'm also going to include another declaration of the same mixin. And this time, I will include at and then underscore. This means to say that include these properties either way. Now, let's see how this happens. Let's declare two variables. I'm gonna say small, which will basically be smaller. And then another called big, which will basically be bigger. And finally, let me define a div called box. And inside this box, I will call the mixin, just like before. But this time, I will pass in the switch, whether it's bigger or smaller. So, let's just try it small. And we will also pass in the length, so let's just say 100 pixel. Now, notice, since I have declared that it is a small, the option will fall back to this block. Now I have passed in 100 and therefor, 100 divided by 2. And it will fall back to the values for width and height. Just as you see here, width, 50 pixels. Now, apart from the optional parameter, we have also include the parameters that will go on as a default. That is defined right here. So, this becomes very useful if you have a bunch of mixin. But you also have a little bit of options to add on. Next, let's go through very simple selector inheritance, as well as inheritance for pseudo classes. This should definitely remind you, once again, of SASS because the syntax is so similar. So, in order to do a selector inheritance, all you need to do is just nest it. And then we can delete this. If the anchor tag is a child of the p tag, we can once again and nested inside the p tag. And if there is a pseudo class, the familiar ampersand sign is used along with the pseudo class. So, let me indent it properly. We see how it is compiled in to CSS. Based on the selector inheritance that we just learned, this should look very much similar to you. So when I compile this, yep, that's right, it will be a and then the child will be parent b, the child will be parent c, the child will be parent. Now, unless there is a special use case for the symbol ampersand. Now, notice what happens when I use ampersand here. So, after the so-called nesting, I include ampersand and, that's right, in this case, this nested tag, or a selector, this nested element actually becomes the parent. So in this case, it will be parent and the child will be a. Next, let's talk a little bit about scoping just like any other programming language. All right, that should not surprise you. I mean, the main color variable is defined as white and, therefor, all the colors you see are white as well. Now, if I define here, main color is equal to, say, #444. Notice what happens to main and sidebar colors. It will all become 444. So, just like scoping, any internal functions are child functions. It will all contain the main color value as #444. But, let's say sidebar, you want something darker. So main color, let's say you want it as #aaa. And, there you go, you see that inside the innermost declaration of .sidebar, it will be #aaa. Let me now try out this thing called import. And if you have another library, which is lib.less. You can just include this, so, for the sake of a demo, I'll just include lib.less. Maybe I'll just say font-size is 16 pixel. And, once I come back and compile it, so there you go. It will basically replace the entire code that is found inside lib.less. It is definitely much better than having an extra HTTP request. So, now let me exit the CodeKit. All this while we were compiling LESS on the server side. Which means, you kind of code in your development environment using the LESS syntax, you churn out the prevalent CSS, and then you upload it for production. I also wanted to tell you how to do it on the client side. Now, all of this is probably not recommended because the clients side compilation of LESS will definitely take up processing for your other functions and processes that you might be needing. But, let's say for some simple prototyping or even demoing on spot, you might need it. And, I just wanted to let you know that this function is available. Right, so, let me just create a new file called index.html. And firstly, I can here, include the LESS files, instead of style.css, I can include a LESS here directly. And, you will also have to include it as a script file, the less.js file. So, once again, one of my favorite site. I'll go to CDN.JS and search for less, and let's copy this. Now, inside the content, and LESS include a box and inside the box, I'll have a paragraph with some, oh, 30 words. And now inside LESS, let me just have the box and maybe I can just put a background color of blue and I will also have the paragraph color as, say, red. Now notice here, once again, there were no CSS file linked here, and neither are there any CSS file. And once we open this in the browser, we have our LESS styles being applied. So, that was a little bit about LESS CSS, another preprocessor. Do go ahead and check out more of the language syntax functions. If you like it, to go ahead and use it. And, I also wanted to point out that there is actually an entire tuts+ course on this, where Dan Roman, the instructor, goes through each of the functions and features of LESS in detail. Do go ahead and check it out and have fun with a CSS preprocessor.