4.1 Sass + Compass

Let's say that you have been using CSS for quite a while now. Soon you will discover that CSS will not optimize for modularity or even repeated CSS code. Well, this is where a type of CSS preprocessor, for example, Sass, comes in to play. In this video, we will go through the features of Sass, what it can do, how modular it can help you code. And more importantly, you will realize how productive and fun it is to use. So let's get started with using Sass and installing it. Now I'll be using the command line option of installing it so that we can play with the various options in the command line. And towards the end of this video, I'll also introduce you to a GUI way of compiling Sass to CSS. I really recommend you to go through the website because it will go through briefly what Sass can do. For example, variables, nesting, mixins, so little functions, or even selector inheritance. In terms of documentation, I really love the Sass reference because it is very detailed with good examples. So we have to use RubyGems, which is a package manager for the Ruby world. And once you have installed RubyGem, do make sure you have it in the system. So let me go to my command line, and when you inquire gem --version, yep, I have RubyGems in my system. Next, you should be doing gem install and then sass. And this will basically install Sass into your local machine. Now, I have already done that, so if everything is fine and you query the version of Sass, there you go, so I am using 3.2.9. So let's get started with Sass. Now I'm inside a folder with only one file, which is style.css. Let's look at the very simple file. Now, in order to start using Sass, you can use this syntax called SCSS. So let's briefly go through what is SCSS. So SCSS will look very much like CSS. For example, it will still have those curly open brackets and closed brackets. And every line of the property and value will end with a semicolon. Whereas SASS, another type of syntax which is also very much supported by Sass, will do away with the curly braces as well as the semicolons at the end. But we have to really take note that the white spaces are very important for indentation. So it's your choice. You can use SCSS way of syntax, or SASS. Now, the advantage of using SCSS is this, that any CSS file is effectively an SCSS file. Let's look at how we can make this happen. So here I am in a .css file, which is very normal for all of us to use. And now let me go ahead and rename it. So I'll rename it as scss. Once we do that, we can go to our command line here, and let's compile a SCSS file to CSS. And to do that, the command will be sass, and then the name of the original input file, which is style.scss, and then colon, and then the output file. So let's say for us it will be style.css. And once we do that, notice now a new file is created, which is style.css. Let's go ahead and look at it. So on my left I have SCSS, and on my right I have CSS. Now, you might be wondering, so what is the big advantage here? So let's say we have an obvious error here, and we are not closing off the style. Now, usually in a CSS file, we will not be aware of this error. So let's try to compile this. Immediately, you'll see that it will give us an error warning, which is syntax error, and notice what? It tries to complete it for you, but at least you know what is the error in the original file. So this is a really good example of how Sass helps us in noting errors. The next obvious example is nesting. So, for example, here we have two anchor tags, but one has a pseudo-class of hover. In Sass, we can easily nest it. So let's see how nesting works. So over here under the anchor tag, I'll put ampersand and then hover, and then I can go ahead and basically just delete this away. Now let's go ahead and compile the Sass to CSS once again. But guess what? I have been doing this for every single change. This is definitely not the most efficient. So for this, we can pass in a parameter called watch. And we don't even have to come back and compile Sass to CSS anymore. It will keep watching the file.scss. And it will keep compiling it to CSS. That's it, the watcher is running. And now when we come back, notice here, yes, the code looks exactly the same, but guess what? It has compiled it with the little indentation and it is definitely good for readability. The very first thing that I really like about Sass is that you, we can put in comments. So if you put in a // comment, and notice here, it will not be compiled into a CSS comment. Now, this becomes extremely useful when we put, want to put comments for other developers or for greater understanding. But let's say you do want the comment eventually to be output in CSS. Well, in that case, you can put it under the usual CSS comments. And once it's compiled, this comment will come out. So, once again, if you do a //, this comment will never come out in the compiled CSS. This is the example of comment that I like to use because eventually in production, I basically no use for these sort of comments. So let's say you have a header tag and then an h1. Now, usually when we want to define this h1 only under a header, we usually write CSS in this manner. Now, Sass, as we mentioned before, can do nesting very well. So for this case, I'll just copy and paste it right here. That's it. Notice here when I compile it, it will be exactly the same, but it is nicely indented for us. It is definitely very readable. Similarly, if we want to nest with the pseudo-class, we can copy exactly the same under the main tag. But instead of just colon and then the pseudo-class, we need to put in ampersand. And now when we kind of compile it, there you go, it will be nicely indented. Now, what about nesting using classes? So in this case, I have two anchor tags, but they are two classes, one for warning and one for info, yep. We can do nesting as well. So in this case, I'll start with the main anchor tag. And under the anchor tag, I can do the same syntax that we just saw for nesting, which is ampersand. And then we can put in a .warning. So let me just copy and paste it here. And let me do the same for info. There you go. So we have anchor tags, but we also have two classes under anchor tags. And now when we compile it, it will look exactly the same, but notice how compact this code is. And it is definitely much more readable. Next, let's explore variables. Now, often whether in terms of color or even dimensions, we like to put in some values. For example, hex color values. In this case, we can make it really compact, or rather, don't repeat yourself. So we can declare variables with this dollar sign. And then let's just say it's grey, then we put in the value. Now, when we compile this, obviously nothing will happen and it will look exactly the same, but this is the power of it. Now, next time you see #eee, we can all replace it with this color called $grey. Great. And if you notice, it looks exactly the same, but it becomes much more dynamic. Now, if one day, our color of shade instead of #eee, it becomes, let's say, #ccc, you just need to change one line. Notice both of the lines are changed to #ccc. Now at this point, let me introduce you to some very fun color functions. Often in our projects, we might have color palettes which will lighten or darken a certain color. So for example, over here, instead of bbb, we can even darken or lighten the colors. So let's try lighten. Let's say lighten it by about 10%. And when you come back to the compiled CSS, you'll see that it will lighten it up into e6e6e6. Similarly, you can also use the function darken, and it will darken the grey color to b3b3b3. Next, I'll take the concept of declaring variables into mathematical functions. So for example, over here, the section tag has a width with 80%, which is declared in the variables. Now, let's say the height is always half of the width. Yes, in this case, we can even perform some very simply math calculations. So notice here what happens. Yep, the height will become 40%. So similarly, you do go ahead and try out other mathematical operators. So let's say you want to plus 20%. Yep, it will become to 16% or even minus. You can even times it by there you go. I have a little error here, and it will tell you that this syntax is not valid. How smart. So why don't we do it by times 2, which is a more sane value? And there you have it. I have an error-free CSS compiled code. So do go ahead and use the little functions as well as the math functions. Once again, I do wanna refer to the Sass reference or rather the documentation, which goes through in detail what are the other math operators or even some color operators. Have fun with it. Next, we will go through mixins, or rather styles that we can define once and then reuse it again and again in various part of our CSS. This is a very simple example. So let's say you are declaring padding. It goes to 0 and margin goes to 0 in several places. So in this case, why don't we make a little mixin? So to do that, we will say @mixin, and then we give it a name. So let's just say zero. And inside here, we will define the mixin, which is padding 0 and margin 0, like so. And once we do the CSS compilation, you will see that it will look exactly the same. Now, this is where the power comes. Now I can delete the entire code. And we can say @include zero, and just like this. So when we come back, it looks exactly the same. But guess what? Next time you want to use exactly this code, you can just replace it with @include zero. Yep, it looks exactly the same, but this is where the power comes. So let's say next time, instead of padding just 0, you want to say, how about 1ems and a 0? And now when you compile in both the places or ra, rather wherever you are calling the mixin, it will be declared as 1em and then 0. Now, another cool thing about mixin is that you can pass arguments. So, for example, here you say top-bottom and another one, let's say left-right. And you can use these arguments inside the definition of the styles, very much like how you declare functions in other programming languages. Now when you call the zero mixin, you'll have to pass in the values. So for example, in this case, I can say em and let's say 0. But here, let's say we have 3 ems and 0. Let's how that looks like. And there you go, this becomes much more dynamic. Another cool thing about mixin and arguments is that you can even pass in default values. So for example, over here ,let's just say I pass in 0, which is by default what it is. And when an unordered list calls zero, I do not have to pass in any parameter. And when I kind of compile it, the 0s will be compiled as part of the default arguments, whereas if we pass in the arguments, it will be compiled exactly as what we have defined. Let's look at this piece of code now. So you see under container, we have a few properties under values. And inside the main, you'll see that many of the properties and the corresponding values are exactly the same as the container. In this case, wouldn't it be nice if we just extend this container? So for this, we can just say @extends, and once we do this, notice how the CSS compiles. It will basically put the .container and .main together with all the common styles, and then it will just spit out the difference. So do go ahead and use this extends if you feel that there is another class that needs to have exactly the same styles, and on top of that, we need to add on. Next, let's explore how we can combine styles from other CSS files. So for example, over here I have two files, which is style.scss and typography.scss. And if you want to import this style, all I need to do is import and typography.css is exactly in the same folder as style.scss. Now, this import statement will still need to have one extra HTTP. Wouldn't it be nice if we can actually copy and paste basically concatenate the styles and site typography? In this case, all you need to do is just import and paste in the file name. Notice what happens. In this case, it will take on the styles of that file, and put it inside the main file. Finally, let's explore a little bit about the output style of the CSS, the main CSS file that will be compiled via the Sass. So this is my original SCSS file. Notice here it has very minor nesting as well as some variable declaration. Now, in order to compile Sass to CSS, all we need to do is sass and then the input:output. And then when we go to the output file, it will give us the output. But notice here the style with which it is compiled to. Next, let's explore some of the style options. First, we will explore this output style called nested. So notice here nested is the style that is given to us by default. Why don't we explore something called expanded? So expand in this case will not only not indent it, it will also put the curly braces right at the margin. Next, let's explore this style called compact. In this case, it will put each of the tags in one line. And lastly, this is something I used in production. So style is compressed, and here you will notice everything is just in one line and, Sass will basically strip off any white spaces. Finally, let's explore something called Compass. Now, Compass is something that is built on top of Sass. So often, we will already be building a lot of mixins or functions in Sass for our own projects. But before you do that, I highly recommend you to check out Compass because often the functions that we write might already be available in the Compass library. Of course, be sure to check out in detail the Compass documentation. Here you will already see what Compass has to offer. For example, CSS3, layout, reset, typography, utilities and much, much more. Let's explore some of them. You will also have to have installed Compass in your system. So we also do that with RubyGems, so that will be gem install compass. And once you do that, and you query compass --version, yep, there you go, it should be available to you. Why don't we try out the reset? And now, often in our projects, we have some reset styles before we have our project styles. Now, notice the power of this. So I just included one line, import compass reset, and let me come back to the command line and stop the watcher. This time, I will say style expanded, and I'll have to pass in a parameter called compass because we are using the Compass library, and the familiar watch. So you see there was a slight error and I edited to include the semicolon. And once you come back here, notice here it has basically added us the entire reset along with our project style. Isn't it very neat? We didn't even have to like import or write our own resets. So now instead of the reset, let's say we will have this CSS3 library. Now let's look at this property called border-radius. Now, we do know that in many times, we need to include some vendor prefixes. Now of course, we can go ahead and add our own vendor prefixes, but sometimes we have to look through the documentation and we also do not know which specific ones to include. Well, guess what? Compass already comes with that. So in this case, we will include @include, the familiar mixin sign that we learned earlier, and we will then pass on the value of the border radius. And once we do that, guess what? All that necessary vendor prefixes will be added on. Next, why don't we briefly look at this thing called box shadow? So box shadow is very similar to border radius. All we need to do is just include one line and Compass will include the vendor prefixes for us. So why don't we just use this red shadow right here? So over here, let me go ahead and replace the bottom-radius with the box-shadow. And notice here, it will not only include the vendor prefixes, but did you notice that some vendor prefixes are missing? Well, guess what? Compass will align it to what are the exact vendor prefixes necessary and will not insert in the extra ones. So that was brief intro to both Compass, which is based on Sass. I hope it will make you excited to code Sass in a modular, clean, and most importantly, fun way. Now, before I end off, I wanted to introduce you to CodeKit, which is a non-command line way of compiling Sass and Compass. And finally, before I end off, I wanted to point out to you a detailed video course, especially on Sass and Compass by Norris on Tuts+. Do go ahead and view his complete video to have a better understanding about each of the features in detail. So here's wishing all of us a very fun way to code with CSS preprocessor, Sass and Compass.