 Hi there, my friend and friends. A couple of days ago, I talked about native CSS nesting and how it's here and how I'm really excited for it because it's just something that makes our lives a little bit easier as developers. And as I went through that, I glanced over some of the differences between native CSS nesting and SAS nesting. But if you're already somebody who was using a lot of nesting with something like SAS, you might have assumed you already knew what was going on with it, but there's actually some very big and key differences between native CSS nesting and SAS nesting. And so I want to talk about that. And also what's going to happen to SAS nesting now that native CSS nesting is sort of along the way and getting closer. So we're going to do a quick rundown on what some of these differences are. And so here I have this very simple example of sort of the type of nesting you might see in SAS. And on the other side, we're going to see, you know, what the equivalent would be in regular CSS nesting, because we can't actually do this. This would not be, this would be invalid. It wouldn't work. And if you know SAS, you're used to the ampersand, you'd actually have to include the ampersand here when doing it with native CSS. And that's because any nested selector has to start with a symbol. And this is the new nesting selector that we have. So this is one of the valid symbols, any other symbol you're used to, whether it's a class selector ID selector, the different combinators, your pseudo classes, all of those things apply, they all work. So we have our nav, UL and our nav A would have to be done this way. Now, if you had something here that was like your nav list, that would obviously be fine. And this could be my nav link. And in this case, of course, this would have to be a dot. If you did that, you could bring that over and that would work perfectly fine because they're starting with symbols. So in that case, you do not need to have the ampersand there. Now, of course, though, you're looking at this going, Kevin, why would I ever do that? I would just do this, right? That's that's something that you would 100% do. This is one of the features that people love about SAS, especially if you're following them, you would be doing something probably that looks more like that. And this is something we cannot do with native CSS. And the reason that we can't do that with native CSS is just like variables in SAS were something that would get compiled away, right? So in this case, this was something that would just get compiled. It's basically a string. And when it gets compiled, it would take this and replace it. And you just get your nav list there with native CSS, the ampersand. So if I tried doing that over here and we're not compiling to anything right now, so it doesn't really matter. But if I tried doing that here, it wouldn't work. And that's because native CSS, this is a live object, just like custom properties never get compiled. If a custom property, it's a variable that's live in the browser. So this is a live object that's referencing the dot nav that's right here. And it's treating this still as its own selector and treating this part after it as its own selector as well. So what this is actually trying to do is make a compound selector. So what this this could work if I did it like this instead, because this in this case, that would be the same thing as writing nav and my nav list, right? So then I have I could have that same rule right there. This and this would be the same thing. Now, of course, this doesn't make sense the way we'd be doing it. But I'm just explaining how it would work and how this would make a compound selector. Of course, we can go and do it like that. And then it would add the space and it would work like it would work in SAS and this, I guess, would make more sense. But then you're not getting away with what we have here. But just to circle back and if you had a nav list like this and we wrote it this way around, that would be valid too. And it would actually be the exact same selector. And that's exactly what's going on if we're using the ampersand by bringing the ampersand here and trying to do something like this. The way CSS is seeing this is this is one selector and then this is my other selector. So it would be the equivalent of doing a nav list and then having a dot nav here, right? So the ampersand is getting turned into the dot nav. And then the nav list is the nav list there. So it's the other way around. But it just we're not used to seeing this as like an actual selector that doesn't get compiled or changed away. So this is one of the really big differences. And SAS is going to address this. We'll talk more about that at the end, though, because if you want to use native CSS, we'll get there. But yes, SAS does have a plan for how it's going to handle that. Now, another thing is impacts on specificity that didn't happen in SAS that will be happening in native CSS nesting. So let's say we came in with having something like this, where we have a main and an article. And in both of them, the H2 is getting a font family of serif. If I did this in SAS, the compiled CSS at the end of the day. So let's just say this is compiled at the end. It would be something like this, right? So you have your main H2 and your article H2 and they get the font family there. This is not the same thing that you'd be getting with regular CSS. So if I tried doing this with regular old CSS, we have the exact same selector here. The way the browser would be seeing that is like this. Now, the is selector is going to be a big part of how nesting works with native CSS. And we need to understand the implications of that. The specificity of this rule here would just be like two element selectors. Whereas in this case, even if it's the article H2, because this is in the is selector, this ID is part of that. And this ID is actually what's giving this entire part the specificity for what we're working with here. Even if it's only in the article has the specificity of being in an ID selector. And so it boosts the specificity way up. Now, you might be saying, Kevin, just don't use ID selectors. And you're probably right. But it is one of those things we want to watch out for because they are a little bit different. And now I have one more example that I want to look at of how it can actually completely change what the selector actually means. You can select different stuff. And it's a bit of a contrived example. It's demo world here. But and the only way I can do this one is with a visual to show. So here, let's just do a really fast. Come here and we'll say the body bond size, too, just so we can see what's going on is like five RAM. Just so we have my hello there that has the C. Hello background. And then so here we have the dark theme that has a call to action and then a heading inside of it. And so if we look here at the selector, we have this call to action, the heading inside and then dark theme ampersand there. Let's actually we'll start with the and this is in code pan. I'm just going to switch over to using SCSS. And what I'm going to do is let's look at the compiled CSS coming from here. We have a heading inside call to action inside dark theme. That makes a lot of sense, right? So we're just the heading that's inside a call to action that happens to be inside of a dark theme gets some different styling on it. Now, we'll go back to the uncompiled CSS or SCSS. So it's just right. We're taking all of this, we're putting it where that ampersand is. It's definitely not a super common design pattern. This isn't the type of thing that you're going to see too often, but it can be useful from time to time. And in SCSS, it works very straightforward. Now, just for fun, if I don't know why we would do this, but let's move this dark theme inside here. So we have the call to action on the outside, then the dark theme. And you can see that breaks the selector. It's no longer working. And remember, we are in SCSS world right now. If I were to change this over to regular, no, no preprocessor, we're in CSS world now and I hit save, it's working. And I can take this and I can move it down and it's still working. And I move it back up and it's still working. And that's because the way that the is is working under the hood here in what's going on. So this is basically saying that we have a dark theme. And then we have a descendant, but it's going to use is call to action heading here, right? And so it's looking for a heading that's a descendant of a dark theme, but that's also a descendant to call to action. But the order of these don't really matter because as long as the heading is a descendant to both of these in one order or the other, it's going to work. So the call to action here doesn't actually have to be nested as long as the heading has a descendant of call to action. And it's a descendant of the dark theme. It works. So really definitely edge case world here, probably not something that you'd run into trouble with, but because of the way is is underlying functionality here of how nesting works in CSS. It can definitely throw out these random curve balls that you might not have been expecting. And of course, it's in these edge cases where you run into these and it takes the longest amount of time to debug to figure out what's actually going on. So that does lead to a very important question as well as how is this going to be addressed by SAS? And the first thing is SAS is pretty much not going to do anything at all. SAS is going to compile it the way it's always been compiling things for now. And what it's going to do is actually wait for support of the is selector to hit 98 percent. And once it hits 98 percent, it's actually going to change the way that the selector works. So the ampersand will get compiled into an is selector. So we'll actually work in the same way native CSS and in SAS. So that will eventually happen. That's going to be considered a breaking change. It's going to be a major version release and it will be a breaking change. They're talking about also updating their migrator to get it, you know, so you can migrate a project if need be. And it'd be a while until it hits that 98 percent anyway. So for the time being, things won't change. The one thing that will be different is moving forward. If you're going to you do an at use or like you're importing a regular dot CSS file, which you can do, you can in one project, you have a dot SAS, a dot SCSS and a dot CSS. And it would just do its magic to all of those files, basically. And it just made it easy if you had an existing CSS file, you could just bring it in and not change anything with it, including the extension. Now, if a dot CSS file has nesting in it, it's going to treat it like native CSS nesting because it's going to assume you did that on purpose. So that's the only change that's sort of short term is going to happen. And then long term, like I said, it will be considered a breaking change at one point with a major version release that will sort of change that behavior. But the one thing that they are going to try or they said they are going to keep is being able to do our good old double, you know, concatenating things together. Right. So if you have your call to action and then you have your call to action, let's just do it quickly. Right. Here would be your double underscore heading or whatever. And then you'd have your styles for that. So they're talking about making sure that this could continue to work even once they get the behavior matching how it works with native CSS. Just because this is such a fundamental part of how nesting is always worked in SAS and they assume people don't want that to actually change. And if you're watching this, I'm assuming you already use SAS, but maybe it's something you're interested in, but you don't completely use yet. And if you want to know more about how to use it or using it with modern CSS like we're seeing, there's a lot of CSS features that are being introduced that are coming from SAS, but you want to know more about how you can bring all of that into your workflow, use all of this and you continue using SAS. There's a lot of good stuff in SAS that isn't yet part of CSS and isn't really on the roadmap for it either. And so maybe you just want to step up your game and take advantage of a lot of these other SAS things that you're not actually using or just want to see how to use it in a more modern workflow. I have a course called Beyond CSS that's just a couple of weeks away from launching where I look at just going over all the fundamentals of SAS and understanding it with the purpose of then taking that and leveraging it, using it with modern CSS techniques and then also taking it a step further, looking at how we can create and maintain a design system using it, looking at theming and then even taking everything we've done with that and putting it together and using a headless CMS for client-ready projects and all of that. If that sounds interesting to you, it's beyondcss.dev. The link for it is just down below where you can sign up for updates. You don't miss when it launches. As I said, it's right around the corner. It's getting super close to being able to open the doors for it, so I'm really excited for that. But with that said, for now, I'd just like to thank my enablers of awesome Bailey, Andrew James and Rico, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.