4.3 Stylus + Nib

So far, we have gone through two CSS preprocesses, Sass and LESS. The final one that we will explore is called Stylus. I hope with the last roundup of Stylus, you will notice once again the similarities on how CSS preprocessor can be useful. And also the subtle differences in using a different preprocessor. So let's get started by installing Stylus. So Stylus can be installed using npn, a no package manager. Usually, you can do a global install with an option -g. After you have installed Stylus, if you query stylus --version, it will give you the current version that you are using. One cool thing about Stylus is that you can enter it in a ripple, or in an interactive mode with an option -i. So let's try that out. Let's say we have a color, and it's color red. There you go, it will give you the hex color immediately. You can even do very minor, kind of, operations. There you go, it is 7 pixel rounded up. So do go ahead and try out Stylus interactive for some quick CSS references. Finally, let's try out one last thing. So if you kind of do stylus help and then a CSS property name, let's just try a bolder-radius, it will actually bring us to the documentation page by Mozilla Developer Network. Pretty neat, isn't it? So whenever you are developing, you can either use the interactive mode or even some references with the help command. So, right now, I am in my desktop which is completely empty. Let's create a new stylus, file. So let us call it style., and instead of .css, we will just put styl, which is S-T-Y-L. Let's open this up in Sublime Text. So right now my style.styl is completely empty. Let's put in some very basic styles. Something like this, a paragraph with a color red. Now, how can we compile this from Stylus to CSS? Now firstly, notice that this is completely a CSS syntax. So for this, we will have to do stylus and then, -w, so that we can watch the file. And then just the input file name, which is style.styl, it will immediately know that it will take the name, which is style, and compile it to style.css. So let's do that and keep the watcher running. And immediately, you'll see that a style.css is compiled. And there you go, this is our new file. So once again, I will put the left one as style as syntax, and the right as CSS. So that we can understand exactly what the output is. Now one cool thing about Stylus is that you can actually remove these curly brackets. Notice what happens. Yep, the CSS will be compiled. You can even remove the semi-colon. Or, why don't we go one step further, even remove the colon. It will be exactly the same, but it gives you a lot of flexibility into what syntax you can use. Sometimes, I do prefer this clean way, with maybe just a colon to kind of denote that this is the property and this is the value. Yep, I like to use this case. So let's go with a very clean syntax but do note that you will need this sort of correct indentation or rather whitespace for the Stylus to correctly output the CSS. Finally, before I move on, I wanted to point out just one more, stylus command, which is basically, ---lin-numbers. So this becomes extremely useful when we are kind of debugging or building the CSS code. So when we do --lin-numbers, notice what happens, it will actually give you the corresponding line number. In this case, it will tell us directly that, hey this is outputting from line one. All right so I'll basically go on to watch my style.styl and let's explore some of the features that Stylus has to offer. All right, the very first thing I will denote is how to write a silent comment. So very much similar to Sass, this will be a silent comment which will not be compiled in CSS. This, on the other hand, will be a normal CSS comment which will be compiled. There you go. So you will have the comment compiled. But one thing to note is that if you pass in, parameter or an option which is a -c for compressed code, even the CSS, formatted, comment will not be output because in compressed format, you even don't want any sort of comments. But let's say, even in compressed format, you do want some comments. So I will put in a comment, not silent, but instead of just the plain old CSS, comments in text, I will have to include exclamation mark to say that hey, compile it anyways. So, in CSS, we will see this. So, just to note, that these are the three types of comments. But, anyway, I tend to use this one a lot, and not at all, these two. So, let me come back and compile it to a non-compressed style. So that we can see what's going on, and it is much more readable. All right, so now that the Stylus watcher is running, let's start with the first feature that we saw in almost all preprocessors which is the variables. So let's say we have a paragraph and an h1, and they both have one color called red. Now in Stylus, you can create a variable with just the variable name equal to and then the color name. And then you can go ahead and replace the color wherever it's noted as the variable name. So there you go, it will be kind of compiled as the blue color. Now in Stylus, there is another syntax for variable you can actually put a dollar sign in front of the variable name to kind of denote that this is a variable. And, yep, it will be compiled similarly. So choose the syntax that you would want a dollar sign or without the dollar sign. The main point is to be consistent within the project. Next, let's go through something called interpolation in Stylus. So here you see that I've applied border radius to the tag called button. But you will definitely realize that we also need to include something called vendor prefixes, and these vendor prefixes come in very often in other properties as well. So why don't we create a sort of function or a mixin for vendor. Firstly, we will pass in the property, the CSS property, and then the various arguments. And inside the vendor prefixes, a very common one will be WebKit. And over here, we can pass in the property. So it can be either WebKit border-radius or it can even be WebKit say box-shadow and others. And of course, this will be followed on by the arguments. The other common vendor prefix is a -moz, and we can do the same thing with property, and similarly pass in the arguments. And finally, it will be the property itself and the arguments. In this case, we can apply this vendor to a lot more CSS properties. So let's, go ahead and apply this to something called the border radius. And inside here, we can call in vendor and, the property in this case will be border-radius and, of course, it will followed by the arguments. Great. So now, when you apply this, there you go. The vendor prefixes will be applied. But guess what? Next time, if you have something called the box-shadow and let's just say you have a 0, 0, 0 and then red. Yep, you will have the box-shadow applied here but the vendor prefixes are not. All you need to do is just copy this again and apply it to the box-shadow. And of course, replace the property with the box-shadow. The vendor prefixes will be applied to the box-shadow as well. So let's say we have a box-shadow, something like this. Obviously there are no vendor prefixes. Let's create a little mixin and see how we can apply rest arguments or rest parameters. So let's prepare the box-shadow mixin first. And over here, if you put arguments and then a little dot sign, which is dot, dot, dot which means to say it can have one or more arguments, it is a pretty little neat syntax to denote this. So once again, we can do webkit-, and then a box-shadow, and then we can just pass in the arguments. And similarly, we can pass in the moz of vendor prefix and box-shadow, and arguments as well. And finally, of course, a box-shadow and arguments. Great. And now when we compile it to CSS, box-shadow will not only be accompanied by the vendor prefixes, must guess what the rest parameters arguments did. It basically took in four arguments instead of just one. And we had this little three dot syntax to denote that. Finally, before we move on, I highly recommend you to go through the documentation itself. There are many useful stuff that I return, not only in detail, but with relevant Stylus syntax as well as the corresponding compiled CSS syntax. Lastly, let's move onto something called the Neighbors Stylus Library. So Nib library consists of its own CSS3 extensions based on Stylus. Nib library comes with many CSS3 Stylus functions such as linear gradient, or even things like positions and clearfix border-radius. Do go ahead and have a brief read through this. So the very first thing we will do is, of course, have the Nib installed in our system. So you can do npm install -g for global nib. And if you want to have it just for the project, you can, of course, have it npm install nib. Now, once you do that, I'm gonna just run the watcher again. But this time, I'm gonna pass in the parameter, which is -u for use and pass in the library called nib. Yes, there's an error, because I've incomplete something. So, import nib and it will exit. So let me try again. Import nib and there you go. Of course it will be completely empty, but we can go ahead and start using the libraries. And why don't we use this, linear gradient? So let me just try this linear gradient which comes. And let's just supply it to the body. All right. And once we sort of, compile the CSS, notice here that the nib library will be basically add all the vendor prefixes. So let me align it, so that you can see what is the compiled. So there you go, it will be webkit, moz, for Oprah, Microsoft, linear gradient. So that basically brings us to the end of three part miniseries on CSS preprocessors. We went through Sass, and then Compass library, which comes with its own functions and mixed in based on Sass. The second preprocessor that we went through was LESS. On the third, and this video, we went through basically Stylus along with the little Nib library or sort of extension, which is based on Stylus. Now before I end, I wanted to go through a very few links. This article by Lea Verou is definitely two years old but I felt it kind of pointed out something that you should be noting, when you first start out, using CSS preprocessor. You can basically read through the article which is, losing track of CSS filesize. Or even things like maintenance woe, or even duplicating code. Have a read through and know what mistakes you can make when using CSS preprocessor. And with that, I also wanted to point out, Chris Coyler's article musings on preprocessors. But despite knowing the challenges of using a CSS preprocessor, I wanted to point out something that Chris Coyler noted. Point being write your Sass, Less, or Stylus so that the output is exactly how you would have written your CSS without it. So exactly like what I did initially when you're starting off or even if you want to understand a part of the CSS preprocessor, it is extremely important for us to code it out in CSS preprocessor and see the output. So that we have a better understanding of what exactly the CSS preprocessor is doing. Once we have that understanding, I encourage you to go ahead and explore more. All the three pre, s, s, CSS preprocessor. And I've also pointed out various articles written by CSS, tricks once again. So at the end, use something that the project requires, maybe something you prefer. But I definitely hope that this video series has given you a little bit of jump, to give you a big overview on the CSS preprocessors. So go ahead and use them, and have fun with it.