Check out a free preview of the full CSS In-Depth, v2 course:
The "Sass" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shares how she uses Sass to organize and modularize her CSS.

Get Unlimited Access Now

Transcript from the "Sass" Lesson

[00:00:02]
>> Estelle Weyl: Okay, so on the left hand side right now I'm using Sublime, and on the left hand side it lists all of my Sass files. I have two files right here which are basically my entire application. And it says very simply, declares the language, here's my presentation, here's the deck_functionality, here's the buttons, here's a slide, here's a heading, here's content.

[00:00:28] When I have a definition list,
>> Estelle Weyl: In this deck I have a definition list, so I want to include my definition list. And I have also objects which is I'm calling to some elements, I'm calling the object element, and I wanna style those a certain way. And then on the slide call grid lines, and I wanna import this for this deck only.

[00:00:50] So each deck I basically am using the all the same Sass files here, but I'm using a different variables file. So actually in here it should say, import "variables". So for each deck I have a different variables file, which is where I declare all my colors. And then I very small Sass modules where I just declare the functionality on one thing.

[00:01:20] So let's open buttons.
>> Estelle Weyl: I have a next button and a previous button.
>> Estelle Weyl: And these are the only two buttons that I have in the entire deck. And all of my decks almost have them, except for you saw that there were ones that had buttons on left and right and ones that had arrows.

[00:01:42] S I changed it at some point to a triangle rather, and this is the triangle one. So when I decided that I really didn't like those two buttons anymore and I wanted triangles in the upper corner, all I had to do was get rid of one _button SCSS file and put another one in and I didn't have to touch anything else.

[00:02:02] And then I gave it the color of color pop and inverted text. So the background is color pop and the color is inverted text. So when you saw that I had different decks, they all look kind the same they just have different color schemes. All I did was change out the variables file and have ten different colors declared and the whole look of field changed.

[00:02:27] But in this one, I have this thing called grid lines. And if you did the grid section, there was a page where it had a four by four grid lines with three blue grid cells. And so that thing is in CSS but it's only used by one of my talks, one section.

[00:02:56] So there's no reason to pull it into all the sections. So the style CSS pulls it in, but none of the other ones pull it in. And if we take a look at that grid lines right here, it's basically, grid lines is the name of the class of the parent.

[00:03:14] And then inside the div, that's the direct child, is 460 pixels. And I justify the content, and I actually use display flex instead of grid because I'm more comfortable with flex box than I am with grid cuz I wrote a book on it. And I'm using the colors of the page, the alert and the color pop.

[00:03:33] So if I actually were to change the color scheme for this grid section, I wouldn't even have to update this. So what you'll note that I'm doing is I have very short, very, very short, Sass files and I have a lot of them.
>> Estelle Weyl: Definition list is how I did my definition list.

[00:03:58] I didn't even use nesting on this one because I pulled it from code that was all ready produced, but it's ten lines long. If I don't have a definition list I don't include this in my Sass file until I include a definition list.
>> Estelle Weyl: So it's not that I'm using Sass for any of the functions.

[00:04:18] The reason I'm showing you this is how I'm ordering my code. So if I have a group of people working on a section of a website, they all need the same header, and they all need the same footer, and they all need the page layout the same. But only one group has the finance widget.

[00:04:35] So they can include all the same shell and then they can include the finance widget, and all they have to do is pull in the finance Sass file which might have 12 sub Sass files. And when they decide that they're no longer gonna do five year, it's a finance widget so look at the last day, last five days, last month, last two years, last five years.

[00:04:57] We are not doing five years anymore and we are not doing two years anymore. They can just cut out the multi year functionality and change that one thing. And it will go all the way up the chain, right. You only have to change it at one location. So I'm not telling you what classes names to use, though I think it's much very important to use something that has a functionality, like you saw color pop.

[00:05:18] It didn't say the red in the corners, it said color pop, which is the popping color for that deck. Inverted text, I have the main colored text and then I have an inverted text when you have dark on light versus light on dark. By keeping it modular like this, when I remove a slide I just remove the moldule.

[00:05:41] All I do is go into my styles.css. If I were to remove guideline from the deck, I would just do that. And I've just lost 20 lines of CSS, which isn't much, but when you start having legacy objects that are no longer there. And all the names are basically the functionality of that Sass file, it's exactly what it does.

[00:06:01] The variables are just variables, the presentation is the overall presentation. The functionality is what makes it go right to left. That stuff that goes with the JavaScript. The slide is the individual slide. The heading is the heading for the whole document. The content is the content for the whole document, definition list, or print style sheet.

[00:06:23] And it's not really a print style sheet, it's the at media print. It gets rid of the stuff that I don't want to print. And then object and grid lines. So just the simplicity of modulizing it, and that's kind of what I wanted to cover.