Join Ray Villalobos for an in-depth discussion in this video Understanding Sass, part of Sass Essential Training.
- View Offline
- Let's begin by talking about what Sass is and go over some of the main features with some examples. Now Sass is an extension that adds functionality to the cascading style sheets language, or CSS, that's used to design the look of modern websites. Now browsers do not understand and can't really read Sass, so it's what we call a pre-processed language. Sass commands have to be translated into CSS so that it can be understood by a browser. Sass itself is very extensible and has been expanded through the use of plug-ins like Compass, Bourbon, and Susie.
Now Sass is written in Ruby, which is a popular language for the web. Now depending on how you choose to work with Sass, you may need to install Ruby on your machine. Now Sass has a lot of features which have made (mumbles) hugely popular. So let's go over some of them, and I'll show you some examples. One of the most useful addition that Sass brings to CSS is the addition of variables. So a lot of times on the web, we will have a color like this, and honestly, when I look at these colors, I have no idea what color they are supposed to be.
So this happens to be a dark red, but if I didn't write a comment about what this color was supposed to look like in my CSS, I really wouldn't be able to tell. So Sass allows us to create colors like these and assign them to names. After we do that, then we can add those names wherever we would use the colors in our CSS. And that makes it really easy to manage. So imagine I had this color many, many times all over the place in my CSS.
It would be really easy to just come up here and modify this to a different shade of gray or a different color altogether. You can do the same thing with fonts. Another popular feature in Sass is the ability to nest your CSS inside other CSS. Now this is similar to how you work with media queries in CSS, but it's available for any of your rules. So for example, here you can see that I'm developing a grid of images called pixgrid, and inside I have a class ul that means that when this rule is written out, I will end up with a pixgrid ul, and it'll have these styles right here and also a pixgrid ul li, and that will have these styles right here.
Because I can keep everything together, it makes it easier to update in the future. Partials allow you to separate your CSS into modules so that you don't have to write a single massive CSS files. Now this is similar to the way that the addinclude command works in CSS, but because Sass is process, the files are going to be merged together during compilation so that it doesn't cause a separate server call for each one of these pieces, and it's therefore going to be a lot quicker. So for example, you can see here that usually at the beginning of my CSS, I begin importing any variables that I'm going to use in my project, as well as any mix-ins.
Mix-ins are sort of like functions in Sass. You can also import sort of your core base styles that are going to apply everywhere, and then some layout rules. You might import some different modules. These would be sort of like maybe your pages or the different sections of your content. Sass also has a really cool feature called extend. That extend command means that a CSS rule can be based on another rule. So you don't have to repeat things over and over.
Here, for example, we're creating some base code for a button. And whenever we want to create a button where the colors are inverted, we simply create a different class that is based on our original using this extend command. So that makes creating classes based on other classes much easier. With operators, you can create CSS that uses math operations like addition, division, and multiplication in order to create more powerful and flexible styles. So here I have some variables that actually use math in order to multiply a thickness.
So you can also set a default when you create the mix-in. And then this particular mix-in would take care of writing all the browser prefixes that you would need. You can write Sass in two different ways. Each of them has its advantages. Now this is the older way to write Sass, and it uses a .sass extension. It's essentially CSS without a lot of the punctuation. Now here indentation is relevant, so the fact that we added pixgrid and then a ul and it's indented under pixgrid means that this is nested underneath this class of pixgrid.
These styles will be assigned to that on ordered list, and then since this list item right here is indented under this ul, that will be a style underneath that, nested underneath, and it will get these styles. Now the big advantage of this format is that it's super concise. If all the CSS punctuation annoys you and sometimes costs a lot of mistakes, then this is the format for you. Now I personally like the sass format, but it's really good only after you've gotten to use Sass for a while.
So I wouldn't recommend it for new users. The newer syntax and the one we'll be focusing on in this course is called scss. It keeps all the punctuation and is otherwise exactly like CSS, except that you get the additional Sass features like variables, mix-ins, partials, and so on and so forth. The advantage here is that you can write regular CSS in this format and the interpreter, or processor you're using, understands it just fine. That means that it's super easy to learn and work with, especially for beginners.
Since this is a beginner Sass course, then that's what we're going to use. But if you want to, you can try your hand at regular .sass. It's pretty easy to figure out and you can use either one or both formats at the same time in your files. Now Sass has quickly become a fundamental tool for web developers, although CSS might end up adding some of these features like variables or mix-ins in the future. Sass allows you to start using those today. It's going to really change the way that you think about writing CSS.
- Working with variables
- Nesting styles
- Creating mixins
- Conditional statements and loops in SassScript
- Extending your mixins
- Working with lists and maps