The differences between CSS and Sass Nesting

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 someone 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 uh or 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 the equivalent would be in regular CSS nesting because we can't actually do this this would not be in this would be invalid it wouldn't work and if you know SAS you're used to the Ampersand but 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 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 or you would be doing something probably that looks more like that and this is something we can not 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 it native CSS this is a live object just like custom properties never get compiled you have a custom property it's it's a variable that's live in the browser so this is a live object that's referencing the.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'd 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 in it this how this would make a compound selector or 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.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 hey we'll get there um 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 uh 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 LCS s 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 now I have one more example that I want to look at of how it can actually completely change what the selector actually means and 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 if with a visual to show um so and here let's just do a really fast come here and we'll say the body font size too just so we can see what's going on is like five Ram uh just so we have my hello there that has this yellow 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 codepen 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 of 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 Cs set 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 and 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 uh and I can take this and I can move it down and it's still working uh 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 what it's going to use is call to action heading here right um 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 as a descendant of call to action and it's a descendant of the Dark theme it works so really definitely Edge case World here um probably not something that you would run into trouble with but because of the way it is is underlying functionality here of how nesting Works in CSS it can definitely throw these random curveballs 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 um 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 and once it it hits 98 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 could migrate a project if need be and it'll be a while until it hits that 98 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.css file which you can do you can in one project you can have a DOT Sasa Dot scss and 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 they said they are going to keep is being able to do our 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 uh lets us do it quickly uh right here would be your uh double underscore heading or whatever uh 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 uh just because this is such a fundamental part of how nesting has always worked in SAS and they are 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 like client-ready projects and all of that if that sounds interesting to you it's beyond css.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 record on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 27,519

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css nesting, sass nesting, scss nesting, css vs sass nesting, css vs scss nesting, nesting in css, the difference between css and scss

Id: ljDIcBp-9sQ

Length: 12min 12sec (732 seconds)

Published: Thu Jul 20 2023