 Hi there, my friend and friends. Nesting has arrived in native CSS, along with the color mix function. Along with those, we've had custom properties forever now, as well as calc, which lets us do math in CSS. And we've even had the trigonometry functions arrive in CSS recently as well. As time passes on, it just seems that more and more features from preprocessors, such as SAS, are getting incorporated into the native CSS spec. I really love seeing this. It's really exciting, especially for someone like me who's always talking about CSS itself. Despite all of these new things coming, I still use SAS on almost every project that I start. And today, I want to share with you why I bother with it still. So we're going to jump into this and look at several features that are included in SAS, the first of which is something that has come to native CSS, but which there is a bit of a drawback for, which is nesting. And here we can see I have some nesting going on, right here, where I have a nav, a nav list, a nav link, and my hover and focus states there to style up this navigation that we have across the top right here. And if we just come and take a look really fast, we have my nav, and then we have my nav list, and we have my nav items in here as well, and then my nav links. And this is a very common way to name different things. This is, you know, the dem naming convention, where you get the double underscore for things. But this could easily enough be a nav list like this. And then we can take that and do a nav list. And you can see it works just as well. So that's just part of the naming convention. But of course, the nice thing with this is just being able to not have to repeat the nav here. And of course, you could have a longer class name, and it works just as well. And it just becomes a little bit more convenient to do that. This is one of those really nice things with SAS. But if we come and take a look at another version that's right here, and this is without SAS working, you can see that I have my nav and my nav list, everything here is exactly the same. And it's not working. None of the styles are working. And just to show you that it could work is let's change this over to ul. And now all of a sudden, that's going to kick in. And that's just because we can't do these types of strings where they can catnating a string type of thing in native CSS. The ampersand doesn't work like that. It's a live object. It's its own selector. So I've talked about this in a little bit more detail in another video. I don't want to rehash it too much. I'll link to that video in a card or in the link. If you want to really understand, but this is like a selector and a selector. So even if they're stuck together, this is one selector. This is another selector. It's making a compound selector effectively, even though this is the ampersand here. So in native CSS, this will not work. And that's a little bit of a shame. And the makers of SAS have addressed this and said that they are going to bring the nesting on par with how native CSS nesting works. Once the is selector support has gotten better. But they're going to ensure that no matter what, we'll still be able to do this type of thing within our SAS files because people have gotten so used to working this way with it. And for me, this is a really big win. So it's, you know, a nice little quality of life thing that I like. There's nothing wrong with having RUL like that. And then having this be your a and writing our CSS or CSS or CSS or whatever it is, you know, I could do the same thing this way. I'm not against descendant selectors like this. I think they can be fine. It takes advantage of how CSS works. But this is such just an ingrained way of working that for me, it's one of the reasons I will continue to use SAS, but that's a nesting is getting there. And of course, browser support is not there yet. Whereas you can definitely use SAS nesting now and not worry about browser support since it's all compiled away into regular CSS that just works. But another thing that we have in SAS that we do not have and isn't really on the horizon, though I'll talk about that in a second, is mix ins. There was a proposal for at apply, which would work a lot. So it's like a custom property version sort of of a mix in, but it's not going anywhere. That was years ago and it's been years since that's been dropped. So that's not coming. I'll talk about a possible alternative coming to native CSS. But for now, just a really quick thing on the mix ins here, you can see I have these two buttons. So I'm using it there. And so we have, and this is a very simple example, but I have my two buttons right there. And they both have the class of BTN on it. So I create my mix in that has all the styles I want. And then I can make my dot BTN that includes that and all of that, all everything we see here is getting applied. But the nice thing with it is when we want to change different stuff with it, or we want to reuse this somewhere else. So for example, my login that I have right here, I've given that the nav login here as well. So we have the nav link and nav login. So what I can do is I can come down to my nav link and login or my nav link there and let's go underneath that and let's do an and login. So we're using some nesting here as well. And I can just do add include BTN. And it's going to get styled like my buttons right away. It works. It's wonderful. Let's move it over so it's not behind my head. And we can see that it's functioning really well. But the other thing that's nice with this is you can give arguments over here. So you can have different arguments for mix ins, meaning I have a default of a black text color and a default of a white background color. But I can include this, get everything I want to apply here. But maybe I want the styling to be a little bit different. So let's say that my text color is actually going to be let's make the text color white and let's just make this light blue as no, we should do like a royal blue, maybe royal blue as my background color. And then you can see it's keeping all the other same styles. And maybe I'd want to offer like some hover styles and other stuff here or whatever. There's different ways we can do this. But just as a simple example, I thought that'd be a nice one to show that we can make modifications to things as well. And we don't have to rewrite anything. We just include it and make the little changes we want if those arguments are available to us to make some changes to it. And now as far as the native CSS goes, the way most people see the sort of the closest thing to a mixing coming is with style queries. There's gonna be some really awesome stuff we're gonna be able to do with style queries, including having you basically could set up everything you want. And then just with a custom property that you add to an element, it could all of a sudden apply all of those styles. So in a sense, you could use it a lot like a mix in, I think it's going to be used similar, but kind of different at the same time, potentially a bit more powerful. But also I could see them being used together. If you're already have a project with SAS, I don't think it's exclusive to one of the other. But at the same time, I haven't really played with style queries much other than just getting excited and playing with some simple things. And of course, browser support isn't really there for them yet outside of Chrome. So we can't really do too much with them as it stands right now for production anyway. Now, another example that is something that as far as I know, isn't even on the horizon force, regular native CSS, which is loops and loops are super fun and useful. They can be really, really useful in animations. I recently did a video with amachine where we looked at creating particle animations using a loop. It was super useful just in offsetting where the animations were going and doing a few other things with it. So if you want to see how we did that, I'll link to the description down below. Everything we can do with a loop, you can do manually as well. But the more items you have that you want to sort of individually interact with, the more useful a loop gets. So let's say you had something that had like list items like this, you have just this repeating of list items and we'll look at sort of two different approaches we can do for something like this. But what I'm going to do, so let's select my list items, I guess that's my fancy list. So you know what, even we can come here and say class is equal to fancy list right there. And then here we'll do our fancy list. Right, we can select it. And since we're in sassland, we might as well nest in the ally. So we're only changing the list items for fancy lists and not for list items anywhere else. And maybe on these, we want to space them out a little bit. So let's just do a margin block. End of one ram or it's probably a bit big 0.25 ram or something would probably be good. Basically your margin bottom just add a little bit of spacing between them. You could also play with line height or something. But just in case you end up with a long list item, you don't really want to do it with line height. And then what I'm going to do is in here, I'm going to do an at four loop. So I'm going to say four. And if you used a JavaScript for I, and I'm going to say from zero through nine, and I'll explain this a little bit more as we go through it all. Or you know what, we're going to start with one through 10. And then we'll we'll switch that over actually to a zero through nine. I want the ally and I want like the nth child, we're going to cycle through the nth child. So I can do and and child. And I want to sort of I want to select the first one, then the second one, then the third one. And this is where if you had two items or three items, it's not the end of the world. But if you have 10 different nth child, you want to go through or 20 or 50, depending on what you're trying to do. That's not too often. But whenever you might need to select multiple ones, this just makes life a lot easier, because we can do the rule once instead of having to do it a whole bunch of times. So nth child, and I want to cycle through the eyes here. So first one, then it's going to be the second one, then it's going to be the third. I can't put the I like this, I have to use interpolation, because it's normally SAS variables can only be used in as values. So it would be a property value. If you're not using it as a value, you can use it in class names like we're using here, or within sort of a selector, like we're setting up here, you can do it in class names, you can even use it for properties. But whenever you use it in one of those places, you just need the pound and then you have to wrap it inside of curly braces as well. And then you can use your variables basically anywhere in your CSS that you want. So I'm going to take that and then I'm going to say and marker. And on the marker itself, we're going to set the color. And let's just say color red, and they're all going to go to red. This is kind of useless, but we've changed the color of the bullet point. But what I can do here is let's do an HSL. And let's say here, we'll start with zero degrees, or have a 50% and a 50%, which will keep them basically red. And just to show you, maybe it will boost the this up a little bit 70, and we'll make this 200 just for now, or 200. So it should be a blue color. And there we go, we can see that that's working. Now, the fun part here is I can do a bit of math in here. And you could use a calc or something like that, as well, but SAS does support math functions without using calc. It's just important to know that these are like it compiles all of this to finish coding. Before I move on, all of these are all the code pens I'm looking at and all these examples, the links to them are down below. And if you go to this little drop down, you can see view compiled CSS, and you can actually take a look at what it's outputting. So if you're you want to sort of look at this in a little bit more detail, you can definitely do that. Just if I go too fast on anything, you think it's cool, and you want to sort of explore the code and how it's working a little bit more. So here where it's 200 degrees, I'm going to say it's zero degrees, plus, and I want to bring in my eye here. So plus I now each one, you know, one degree extra, it's changing, but very, very little, you can see it's a bit more orange at the bottom and a bit more red at the top. But now we can also do like times 10, just so we get a bit more variation. And now you go, you can see they're actually like changing across the way there, I could do times 20, and I can increase that change and you can see it's going all the way through. Now, one way we could also play with this a little bit is let's come here, let's just say marker starting hue, and we'll say it's zero degrees. And then here, let's also do hue variation. And for now, let's just put it to zero, which would means no variation at all and the bigger the number, the more the variation will be. So I could just bring these down. So that's my starting hue can go there. And then my hue variation can come over here. So we're doing exactly the same thing, but you can see they're all red because I have my hue variation at zero. If I bring my hue variation to 10, we start seeing it's going to start shifting over. And if I bring it up to 50, we're going to notice something where the first one is actually changing. That means this one is no longer the starting hue. That sort of stinks. Because what we actually want is the first one to actually use this number. But the problem is we're taking, you know, and the child one, and we're multiplying it by the variation. So the first one ends up being 50. So what I can do to combat this, and that's why I originally had the zero here, I want to do zero through nine. And by doing zero here, that means the eye is zero. So zero times anything is going to be zero. And then it's just going to use this number. So it's going to use zero degrees for the first one. But we do have a problem right now is it's still not working. Because zero as my enth child doesn't really make any sense. So the first one's getting skipped, you know, the zero one, that's, we can even go take a look, let's view compiled CSS, we have ent child zero, which is getting the hue that we want it to start with. And it's not working. So to be able to fix that, what we can actually do is here, I can say plus one. And now the first one will be read. So we're going the starting hue is the right hue. And then we're looping through and we're getting this fun thing of 50 is a bit too big because we're sort of we're going back around the circle. 40 is just a bit too big. So we'll do a 35. So it's a bit maybe of a silly example, but just generating colors like this can be really useful. I'm doing it for the hue. I could also do it for the saturation. I could do this for the lightness. And of course, this is for this, where I'm just doing like colors like this, you could use this for so many different things as well. I could use it for generating column systems where it's automatically figuring out the sizes of the different columns as percentages, there's tons of really useful things. And I know people that do a lot of animations, they absolutely love using for loops because you have to grab so many different pieces often to do animations. And you're doing different offsets on delays and other stuff like that. So for me, loops are really nice thing. I even use loops to generate utility classes for me. There's lots of use cases. But another thing that I do find useful as well is if else statements. And so I want to look at this where we just have, you can see here in h1 and h2 and h3 and this paragraph that has the class of uppercase. And I sort of want to highlight a bit of a problem that can happen when we set up uppercase text. So let's start by making a mix and I'm going to do at mix in per case and I'll explain why I would make this a mix in to start with. And so we have that and then we're just going to do a text transform uppercase. So to use this, what we could do is I could add include uppercase all of these and this looks a little bit silly and right now it is it might as well just do a text transform uppercase instead of setting this all up because if we look at the compiled CSS, that's, oh, I made a mistake there. But for all these other ones, it's working. Let's fix the one that was a busted there because I made a typo. Include like that. There we go. They'll all become uppercase. Where this could become more interesting, though, is if I include a font size here. And so this is an argument and let's say that my font size is going to be Fs. And just to make it easier, we can also give that default of one rem. So if I don't include a font size when I do it, you can see they've all set themselves up to be one rem. So that can be handy right there. But this H1, I actually wanted to be bigger. So let's say this one is six rem. And this one here, I want it to be, I don't know, four rem. And we're going with really big font sizes because it makes it a bit more clear what we're doing. And this will be a 2.5 rem. And so I get all these different font sizes coming in. And one of the problems with uppercase texts especially is the line heights don't look great. This bottom one here where it's the small font size, the line height here actually looks pretty decent. These all have the same line height on them, though. And the line height here is just too big from like a typographic standpoint, it's getting really spaced out. And when you have uppercase large texts, this tends to be an issue. And it's less like, I mean, it's a bit silly, but let's turn this off. If you don't, because we have like the senders here, the parts that stick up and down, the ascenders and the senders, you don't want the line height to be too tight because these can eventually knock into one another every now and then they sort of, you know, the bottom of the peak, it's smooshed into the L here. And that could be a little bit problematic. And you have uppercase texts, those don't exist anymore, you might have accents. So do depend, it does depend on the language. So if you're doing something that has accents, do be careful with it. But like what you might want is a line height, right, of like one, let's just say one, we're going to bring it really tight, or maybe even a point nine, we're going to do a point nine, we're going to really tighten this up a lot. And here this is looking great. But down here, now it's getting so smooshed together. And even even this is really, really getting smooshed. And it's even becoming a little bit harder to read, whereas with this really big text to me, it's completely fine. So one thing we can actually do is bring in if else statements to change the line height, depending on the font size that we use when we do something like this. So I already have this prepared just because it's a bit long to set the whole thing up. But we have exactly the same thing we had before, we have the font size here coming in, and then a text transform of uppercase. But then here I'm saying if my font size is smaller than two REM, I want my line height to be 1.4. If my font size is between two and three REM, I want it to be 1.2. If the font size is between three and five, I want 1.1. And else meaning bigger than five, I want it to be a point nine. And I added colors to these just so we can see that it is working for each one of them, all the way down there. And everything else is exactly the same that we had before. So this definitely takes a little bit more time to set up. But then when you're using it, you know that your line height is always going to be the line height that you want when you're setting a font size that happens to be uppercase text. And that's definitely one of the things when using SAS is sometimes the setup for different things is longer, you might be going, I don't really want to take all the time to set that up, because it's not often I'm making these little adjustments, or maybe you have one class that set up for each one of these, and you never really have to worry about it outside of that. But if you're just going to be throwing uppercase text on stuff, you want to throw a different value in, you don't want to have to think about it. If you have something like that set up, then everything just works behind the scenes. So it depends completely on the project that you're working on, how much uppercase text in this case that you're using. I use if else statements for media queries as well, because I have custom functions set up for media queries to do different things in there, there's also debugging within SAS. So you actually get like errors, if there's problems, you can set up custom messages for your debugging, which can be useful with if else statements as well. Now I realize that SAS isn't for everybody, but the larger the project, the more the payoff does come in, I feel when I'm using these things. And of course, you set this up, it takes a little bit of time to do it. And then you have it for the length of that project. And then you can use that in every other project too, because you already set it up once. And if you think this looks cool, and you'd like to learn more about SAS, but more than just learning about SAS, but learning how you can take these things and implement them into actual projects and see real use cases for them, as well as how we can use SAS with the modern CSS stuff that's coming out because they work really well together. I do have a course that's out now called Beyond CSS that deep dive SAS, it also looks at how we can use it with other tools like post CSS. And as I said, practical use cases for it and working on projects using everything we're putting together. And at the end, you do walk away with starting templates to be able to start your projects much faster as well. If you'd like to know more about it, there is a link to it just down below that you can check out or you can watch this video that's right here where I showcase how the system I have in place is used when actually building out a project with that I would really like to thank my enablers of awesome TT, LLD, Andrew James, Enrico, 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 point on the internet just a little bit more awesome.