If you're applying for a job, it's important that you know how to work with CSS pre-processors. In this video, take a peek at Sass the most popular CSS pre-processed language and work with an example of converting CSS to Sass.
- [Instructor] If you're applying for a job today, it's really important that you know how to work with CSS preprocessors, because you'll probably be asked about them during interviews. Now, it's a better way to write CSS, but more importantly, it's going to make you more marketable. Let's take a peek at what Sass is, why you need it, and then look at an example of converting regular CSS to Sass. Now, Sass stands for Syntactically Awesome Style Sheets. But more importantly, it's a way of writing CSS that is similar to CSS but gives you some additional capabilities.
Here are some of the essential things that you need to know about the language. Number one, there are two versions, and therefore two file extensions. .scss is the newer version that is more popular and looks almost exactly like regular CSS with some additional features, which is a great way to learn. If you're getting started, this is the way to go. And as a matter of fact, you can use perfectly normal CSS in a .scss file. The .sass file extension requires you to use an older syntax where spaces and indentation are relevant.
If you're just getting started, stick with .scss. Now, since this is a preprocess language, your browser is not going to understand those files without some translation. There are two main ways of translating Sass. You can use Ruby, which is the original way of doing things, but it's a lot harder to install. Or, you can use NodeSass, which is a Node.js package. Now, NodeSass is faster at processing, so it's the better way to go, although it always lags a bit behind in terms of having the latest features.
Now, the main feature that Sass gives you are variables, nesting, partials, and mixins, which are like functions. You should know that a lot of these features are becoming available in newer versions of CSS. So let's take a look at how we can use these four types of improvements to help the way we write CSS. So, here's a project from the previous episode, but there is a significant change that you may not notice right away. In the previous episode, we used the style.css file that is in the process/postcss folder.
Now, this file is designed so that I can write CSS with a the latest features, and it'll process into normal CSS. There's another folder called scss, and this is where I'm going to put my Sass. If you notice, this is actually exactly the same code as in the previous episodes. Now, all this stuff is going to automatically be processed by our gulp process, and our file's going to actually end up looking exactly the same as before. So this has the same functionality as in the previous episode.
One difference in my gulp process is that now I am processing Sass files instead of postcss, which you can see that we have a gulp task called sass right here, and it's processing that file. So that's enough setup. Let's go ahead and dig into the things that we can do with our CSS. Number one, we can use something called partials in Sass to break up our code into different pieces. So instead of trying to put everything in one file, it's better sometimes to organize things into different places.
So I can take this body and this container class right here and go ahead and create a new file. I'm going to call this _base.scss, and I'll paste that code in here. And I'll go ahead and save that now, and I'll go back into style.scss and then use an import rule. This looks just like an HTML import rule, but it works a little bit differently. because in Sass, I can call in another file that has a special name. So notice that this file is called _base.scss, but I can import it into this document by just using the word base.
So let's go ahead and save that. So if I do that, you'll notice that when this page reloads, it looks exactly the same as before, but now we have a separate file, and I can keep my CSS more organized. So, I'm going to grab this button code and create another one. So I'll grab actually the button as well as this .nav .btn.hamburger and cut that out of here, and I'm going to create a new CSS file here. Again, I'm going to use that special name, underscored, and I'm going to call this _mixins.scss.
And I'll paste that code. I'll leave it alone for now until we're ready to edit this as a mixin. We'll do that in a minute, and then I'll do another import statement here and import my mixins. So mixins in Sass are like functions. We're going to get to them in just a few minutes. So I'll go ahead and save that, and when our page reloads, it should still look exactly the same. So nothing is really different right now. I'm going to keep breaking things up by grabbing my navigation and putting it in a separate file. So all this code right here is my navigation code, and I'll use an import "nav." I'm not going to save it just yet, 'cause that file doesn't exist, and I'll get an error otherwise.
So New File, _nav.scss, and then paste all that code right there, save this one, and then I can save this other one with the import, and now my page should look still exactly the same way. This is what partials allow you to do. They allow you to import code from one place to another place using this import command, and that just lets you break up your CSS into separate files, which on a big system, is a fantastic way of organizing your code. Another big feature of Sass is the ability to create variables.
Now, if you're going to learn only one thing about Sass, it's that variables are awesome because they allow you to create references to things like colors and fonts and then have a single place where you can update how things look. So I'm going to create another file here. It's going to be called _variables.scss. So I'm going to create a variable by saying @green here, and I'll create an hsl color with the values of the green that I'm already using on my page.
And then I'll create some other colors. Actually, I need to use a dollar sign here. And I'll create some other colors here. All right, so I have my color palette all done here. This can be as complicated as you want it to be. So I'm going to save that, and I'm going to go into my main file and go ahead and import those. I usually import my variables before anything else. It's because some of these other files will use those as well.
Let's go ahead and save that. And now what I can do is, wherever I'm using these colors, I can just replace the colors with the names that I'm using here. So if I go into like _nav.scss and I notice that I'm using this beige, I can just type in that variable name, and that should fix the color. So actually, let's go ahead and save this, and I'm going to change this color to some sort of annoying color, to yellow here. So you can see that it's actually working. This is sort of a good way of testing.
So let's go ahead and leave that as beige, and now it'll go back to the original color. So the cool thing here is that I can actually make this color whatever I want. So let's say we will convert this to orange here and now my background is orange. So I can go into one place and modify all of my colors instead of having to dig through them in different files. So, let's go ahead and change some of the other colors. So this is obviously green here.
Now here, I can use another features of Sass that allows you to take a color and then shift its value by a sort of transformer. So I can say, for this color, I want to use the same color as my orange, and I'll use the name orange here, but I want to darken it by 20%. So, when I do that, you'll notice that it's going to sort of work it the same way as before, and the word is actually darkened. So let's go ahead and make sure that that's correct. And then as soon as my page changes, I'll see the sort of darker version of the color without having to create a different hsl color.
And once again, if you go into variables and you modify this orange color to something else, let's try purple, you can see that not only does the color of the links change, but also it makes the sort of overlays or the sort of rollovers a little bit darker. Let's go ahead and switch that back to that orange because it looks really nice. So the next thing I want to show you is nesting. You probably already know nesting from perhaps using media queries like this, but in Sass, you can nest everything. So it's really not necessary to have all of these elements have a parent .nav.
I can sort of create a parent and then create children underneath that parent, and Sass will convert it for me. So I'm going to create a parent .nav right here, and then I'm going to delete all these other .navs. So all these .navs at the beginning of these elements, I'm just going to get rid of them. So let's go ahead and hit delete. And then I'm going to grab all these elements and cut them out of here and insert them into that main .nav.
So if I save everything, it should still work just fine, and one of the nice things about gulp.js is that if the CSS is the same, it doesn't really sort of reupdate it for you. Let's go ahead and indent it, because it's sort of a good way to show that these sort of elements are now children of this main .nav element. So I can keep on doing that if I wanted to, and say, I could keep on doing that for the .navbar. Let's go ahead and grab all these .navbars, because they're sort of children of this other main .navbar here.
So we will put it in here, right underneath the main .navbar. And then I can get rid of all these other .navbar elements. So let's go ahead and do that, and I can get rid of all of them except for this one. There's something that has to happen with that one. So I'm going to leave it for now and get rid of all these other .navbars, because they are children elements. For this one, I'm going to use a special symbol called an ampersand, and that's because this is sort of a direct children of this element, so I have to put an ampersand right here.
And it should still work the same way, so nothing too different here, except that it just gives you a better way of organizing your CSS so that you know that the indentation is a little bit meaningful here, and it makes it easier to put together. So the last thing I want to show you is mixins. Mixins are like functions, and they look pretty similar. So what I can do is actually create a function for this button, and the way that I do that is I'm going to, instead of creating this button by itself, I'm going to create, and the mixins use this ampersand, and I'm going to say mixin and then give it the name of btn.
And this mixin is going to receive a variable that I'm going to call $color here. So obviously, instead of sort of hardcoding this green right here, I'm going to use this color variable, and then when I am calling this hamburger button, then I'm going to use that mixin within this hamburger button. The way that I call it is by using the at sign and then include and then the name of the mixin, and then I can pass along whichever color I want here. So I can say I'm going to use for this one $orange, and now my button is orange instead of the green.
And let's go ahead and put $green here so you can see that it's now much easier to create a variant of the main button by just passing it along different information. So essentially, this is all going to include all of this other code, except that I can pass it different things. And that's the power of mixins. So, here's some pages where you can get some more information about working with Sass and the Sass language as well as some related courses. This is definitely something that you need to be comfortable with before you go interview for a job, especially as a front-end developer.
If you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn or just about any social media network like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.