Sass vs CSS Custom Properties

[00:00:00]
>> Jen Kramer: We just want to compare some code here. Here's what happens with SASS. Again, I'm assuming that most of you are familiar with this. It's a pre processor. There's compiling that goes on. So here, we declare a SASS variable. We can call it right referring to its name.

[00:00:14]
We have to compile it in order for that color to show up in our CSS, right? You know this. With CSS, it's a little bit different. We can just declare our color. There's no compiling involved, we just call it. All right, so here is the code pen. And here I'm working with SASS.

[00:00:34]
Is that font size big enough? Can everybody see that? Okay, so basically I've got an H1, I've got a paragraph, I've got an article, okay. There's an article, more paragraphs and stuff. And so what I've done over here in my SASS is I've declared my color red, right.

[00:00:55]
In the article, I said my text color will be that color, yeah, and shockingly, my article is red. Everybody's surprised by this?
>> Jen Kramer: Okay, what happens now if I say my color here is color.
>> Jen Kramer: Now all that stuff is red, yeah? Okay, what happens if I do this?

[00:01:21]
I'm gonna change my color. So first of all you're a terrible programmer, but what happens here if I change my color value here, what color are the paragraphs going to be?
>> Speaker 2: The new one should be the new color.
>> Jen Kramer: Let's say I'm gonna make them blue. So how many of you say it's still red?

[00:01:44]
This is a scoping question, right? How many of you say, yeah, it's totally still red. How many of you say it's gonna be blue? Okay, so pretty much everybody here says it's gonna blue. So we are gonna make it blue. The paragraphs are inside of the article so here we have a red on the article.

[00:02:11]
That still takes effect on the heading, but then I read a clear my color to be blue, the paragraphs are gonna be blue even that paragraph here becomes blue, because that declaration of color is closer to the actual words, right. This is one of those just straight CSS inheritance kind of things and so we wind up with blue colors for a paragraph.

[00:02:34]
All right, remember the other part of scoping for SASS? What happens if I re-declare my color here? Let's say I make it green, what's gonna happen now?
>> Jen Kramer: How many say the paragraph's gonna be red? How many say the paragraphs are gonna be blue? How many sig paragraphs are gonna be green?

[00:02:56]
Pretty much everybody say's they're gonna be green. Shockingly, they are green, okay? And that's because I redeclared it locally inside of the paragraph. We need a SASS class? Okay, this is all variables, this is all scoping. And that's why I'm focused on this. So this is the way it normally works in SASS, okay?

[00:03:19]
Let's take a quick look at this and, with CSS variables. It's the same kind of example.
>> Jen Kramer: Anybody have any questions so far? That's literally all the SASS we're gonna do today. We did it, we're done. Okay, so here, I've got my route declaration, right, my color is declared as red.

[00:03:48]
I'm calling it there in my article. There it is. And shockingly, my article is now red. Okay, so let's do the same thing that I did before. So basically what I'm going to do now is, let's see.
>> Jen Kramer: I'll put it right here.
>> Jen Kramer: So I'm gonna redeclare my color here.

[00:04:13]
And I'm gonna make it, I'm gonna make it blue. What color is my article going to be at this point? How many say it's gonna be red? How many say it's gonna blue? Okay.
>> Jen Kramer: Sure enough, it's blue. What happens if I take this?
>> Jen Kramer: Actually, all of this.

[00:04:42]
>> Jen Kramer: Not that.
>> Jen Kramer: And I'm gonna paste that same declaration here into my paragraph. So I'm gonna redeclare my paragraphs as blue, okay? By redefining my variable and calling the color of my paragraph to be blue, how many say that my paragraphs are going to be blue?
>> Jen Kramer: How many say they're going to be red?

[00:05:12]
How many say they're going to be black? Okay, so if I put it here, okay. Making sense, sort of? What if I move this color blue back here to article?
>> Jen Kramer: What's gonna happen?
>> Speaker 2: Paragraph should stay red.
>> Jen Kramer: Okay, so if I move this back, all right?

[00:05:42]
Let me put all this up here. So the root color is red. Right now what we have going on the root color is red I've called the article to be read, I've called paragraph to be read. So sure enough, all the paragraphs are read and the article is read, yeah?

[00:05:56]
If I put in here inside of article, I'm gonna redeclare my color to be blue. What's gonna happen here on the page? How many said paragraphs are going to be red? How many say the paragraphs are gonna be blue? Lots of people are totally confused. Okay, so you're kind of both right.

[00:06:22]
So the first paragraph is gonna be red because here this paragraph is taking it from red, yeah. And here, the color is coming. It was redeclared as blue, p inherits that, cuz we scoped the variable, right?
>> Jen Kramer: [SOUND] Yeah, cuz we're scoping variables by where we're declaring things here.

[00:06:46]
This is actually part of the power of this. That's also the part of what's gonna cause you headaches, cuz you gotta remember how CSS works. This is all straight CSS. This is nothing special about custom properties. This is all about inheritance in the cascade.
>> Jen Kramer: How are you doing so far?

[00:07:08]
>> Jen Kramer: Okay, it gets better. Cuz some of you look afraid, [LAUGH] it's gonna get better, all right? Don't write your code like this. This is terrible methodology. All right, don't do this. All right, so let's go on back and finish this up here. So now you might be wondering about, when am I gonna use SASS and when am I gonna use these custom properties?

[00:07:32]
And is SASS dead. So a lot of people ask me at this point, is SASS dead? What do you guys think? Do you think SASS is dead, we're done with it?
>> Speaker 2: It depends.
>> Jen Kramer: It depends, great answer. What does it depend on?
>> Speaker 2: [LAUGH]. Browser support needs.

[00:07:44]
>> Jen Kramer: Browser support is definitely a thing, but let's set that aside and say we have perfect browser support because in my world, we only support the latest version of Chrome and Firefox. It's a beautiful world. There's rainbows and unicorns everywhere, okay? So in that world, what else, what's better?

[00:08:02]
SASS, variables, is SASS dead? Are we done with it? What else is saas good for?
>> Speaker 3: Mixes are great.
>> Jen Kramer: Mixes are great, what else?
>> Speaker 3: Leaving out curly braces.
>> Jen Kramer: Yeah, leaving out the curly braces, all the nesting stuff, isn't that fabulous? Yeah, that's the little thing with SASS can't do it with CSS, what else?

[00:08:24]
Extends?
>> Speaker 3: Nesting?
>> Jen Kramer: Extends?
>> Speaker 3: Nesting.
>> Jen Kramer: Nesting, extends, partial files. All those things are still things, right? So SASS is not dead. But now we can do the same kind of thing in both places, so what are we going to do? How do we separate things into custom properties versus SASS?

[00:08:41]
And here's my advice on that, so what I would suggest you use your SASS for is things that are going to never change. So your colors, your font families, and so forth. Things that are not going to change across your media queries. Because the big advantage of custom properties is that you can change your values across media queries.

[00:09:01]
Just like you do now with CSS, right? Okay, in SASS, you can't take your color of red and then go to your media query and make it now green. I don't know why you'd do that, but you can't do it, right? And then redeclare your variable again in another media query and make it blue.

[00:09:18]
That just doesn't work with SASS. You can do that with custom properties. And that is the big, big take home from today. So the things that are going to change in the media queries. So the things you're gonna copy and paste and reinstate over and over again or things like your font size, your margin, your padding, your widths, flex basis, all those kinds of properties.

[00:09:38]
You repeat those over and over again, what we're gonna do is change the value of the variable. Its gonna be a beautiful thing. Outside that media query in the Mobile CSS layout, you establish your logic for the layout, and then inside the media queries all we do is change values.

[00:09:56]
My gosh, your webpage just shrunk big time because we don't have to restate ourselves over and over again. All we do now is change the values of variables, makes sense? Everybody excited, this is gonna be amazing. The result is no duplicated code. We now have just different values, just different values.

[00:10:18]
The logic will always be the same. The values will be different, okay? As I said, this is the article, one of the many articles that you could take a look at about CSS variables and JavaScript, so feel free to take a look at that. I have a whole bunch of resources from which we are going to derive the rest of the course today on Flexbox, Gridsystems Grid, Cal Customer properties, all kinds of wonderful stuff.

[00:10:42]
That's where you can go and read all of those.