CSS Is Getting Mixins + Functions

Hey. I am super stoked about this. It seems like CSS is working on a whole bunch of really interesting things in this.

Mix ins and functions proposal was accepted, which means that it's now in the drafting stage to figure out what does it actually look like before it gets implemented in the browsers. But that means that we're gonna get it. You know? I'm pretty excited about it, and we're gonna talk today about what do they do, what are they useful for,

deploy specific.

The the current the current way. It's too late. That way. You could you have to click this too late.

Joking.

A physical button on the wall that we hit. Yeah.

Alright. Well, let's talk about functions and mixins being added to CSS. So we've had CSS custom properties, CSS variables for quite a while Node. And it feels like in the last couple Yarn, now that they're supported in every browser, now that everybody's starting to use them, we're seeing some really, like, dynamic stuff, being able to write less code, being able to write more flexible code, and they're awesome.

However, there still JS. Like, we did an entire show on, like, can you is SAS dead? Can you dump SAS? And 2 of the like, pretty much every feature of Bos, we were saying, yeah. Yeah. Yeah. Yeah. Yeah.

But the the big one was the ability to have custom functions and custom mix ins. And while you can do some of this stuff with variables and and make your selectors a little bit more dynamic.

There still are a lot of use cases where either the code you write is gonna be funky or you're gonna run into weird scoping issues or you you're not able to loop into it. So functions and mix ins being added to CSS is going to solve all those problems. And we're gonna talk about Scott of, like, why might you wanna use this? What are the actual use cases for it? If

Totally. Totally. And, like, yeah, like, you shouldn't have to pre generate every possible option that is out there. Even if we have the tools to figure out what are the possible selectors that we need to generate and and how can we use them together, You shouldn't have to do that JS well as there's some some benefits to be gained here. So let's talk about it. Functions and mix ins, they are being grouped into the same proposal, and both of them are going to have names or identifiers.

And both of them are gonna have arguments or parameters, so you will be able to do things like fancy button and pass in, what color you want it to be, what the radius you want it to be, and then you can get a bunch of CSS back. The difference between functions and mixins is that CSS functions are going to be used to calculate a single value, whereas mixins are being used to group together and apply a bunch of CSS to a specific selector. So, again, a function can be used to like in JavaScript or literally any programming language, a function can be used to tuck away complexity and make something a little bit more dynamic, whereas a a mix in will also be able to do that, but it will return a bunch of CSS media queries, container queries, internal logic that can then be directly applied with they're they're proposing an apply.

But, again, all of the syntax is sort of up in the air right Node, and it's still being discussed. So don't well, maybe do.

Maybe do get get hung up on this syntax right now because all too often, we hear people start whining about syntax and why did they do it this way, and this is not as good as they want it. Now's the time. If you really care about this type of stuff, if you care about how it's going to look and and hopefully some really smart people too because these hard conversations need to be had now before the the draft, and the syntax is finalized.

like, regular people get involved in the standards process because often they'll ask questions like, why is it done this way? Like Yep. I find myself doing that with a lot of the React server component stuff. It's like, I know there is probably some sort of complex reason behind all of this, But, a, I don't care.

And, b, why can't it be as easy as as this? You know? Yeah. Like, all of the complexity and limitations and all of that aside, I just want it to work like this. And that's why it's important to sort of get get involved because maybe we've often seen that we're like, okay, well, same with, like, the nesting Wes had that we had, like, the weird you have to do the ampersand.

And, like, everybody's like, I don't want the ampersand. Like, you know, like, just make it make it the other way. And then they're like, well, you can't really do that. You're gonna break CSS. Then they're like, well, actually, we found a way that we can we can make that work, so it's kind of important.

Color yeah. Or or color mix didn't know. Color mix got nixed. Color contrast might mix

but that's that's the other thing is that we do have these functions built in, and then sometimes you look at them and you go, like, it seems like a lot of work to still do this. The mixing colors syntax, not very good. Right? You have to do from the hex code, then you get the r, the g, the b, or the h, the s, and the l, and then you can recreate a color with it. What about darken, lighten? You know? How about that would be nice. And there's there's a line that needs to be drawn somewhere between, like like, someone's gonna give you lighten and darken functions. Alright. They built it in, and someone will say, yeah. You know what? I don't like that algorithm for lighting and darkening because it doesn't look as good. I'd rather do it on this curve of light lightning and darkening. So

No. I I was extremely heavy stylist user, and I never used I it was all built in as as far as I remember.

Mhmm. So some other use cases Yarn, like, a theme function would be really cool if you wanna be able to pull specific values from your user's theme or if you wanna do something conditionally based on a user's theme. Like, you could have a light and dark theme, but then you could also have a, a dense mode or a, like, a, like, a Scott like, that's one thing I wish Notion had is there's so much padding in Notion. It drives you crazy. It's like, well, I I I want to be able to make this window smaller and not give up half of it to padding. So I wish that there was, like, a dense mode, but I also want dark mode, you know, like, to be able to to mix those 2 together.

And that's really hard because you have to use variables, and and then you have all these weird weird edge cases, and things are scoped a little bit funny, and a theme function would be really nice. I I can think of the syntax website right now JS sometimes we don't want to get the inherited variable. We just wanna simply grab the the actual theme value there, and you could pass in arguments of which theme value you want. Imagine being able to say, like, theme background instead of dash dash, I I forget what it's called, or dynamic values.

In the syntax website right now, we have a, like, a background grit texture that's programmatically generated, and we have a light mode and dark mode version of that. Right? And we have 2 variables, the light mode and the dark mode, and then we have another variable that's just grit texture, And the the value of that changes depending on if you're in light or dark mode. So wouldn't it be cool if you just have a nice function called BG texture, and it can return that value or complex calculations? Often Wes you're using clamp min max calculations, container crewer units based on the size of the container or based on the size of immediate query converting pixels to REMS or MS to REMS. All of that stuff is sometimes like, holy, this is very complex.

Like any function, it's nice to tuck it away into its own function Wes you can simply just use it and pass in the 1 or 2 dynamic bits that you want.

all of these different functions. Right? Yeah. Yeah. I'm I'm working on a website right now, and I have all of these different background colors. And for each of the background colors, I have an associated text color that looks good on top of that. And and what I need to do is a section by section, I set the text color and the background color.

And then I have buttons that are also that color, and they need to inherit. But if that button is a different one, then I need to set the scope of the the values on that button instead of the the parent. Wouldn't it be nice to just say especially when Wes we get style queries, being added to the language as Wes, wouldn't it be nice to say if it's pink, then the text is going to be this specific white?

So that is CSS functions being able to take in some values put some logic inside of that and return a specific value a mix in would do the same, but instead it will return a bunch of property values. So it could return you could have at mix in cool button, then it would return the border radius, the background color, some complex text shadow, a set of backgrounds, but it could also include container queries, support queries, media queries, all of that stuff inside of it. And very similar to what a a class is like. You're probably saying, like, that's that's a class. Isn't it, Scott? Yeah. Yeah. Well, it's it's it's not class because

Yeah. You you don't have to generate them, and they can be runtime dynamic.

Meaning that, like, I I think the tailwind folks are really gonna like this type of thing because the the killer feature in tailwind is the arbitrary value syntax where you put square brackets after it Mhmm. And then you pass whatever you want. And, like, if if tailwind doesn't have what you want, then you can just say, alright. Well, my background color isn't set or I want it to be 24 pixels because of whatever reason, you can use the arbitrary value syntax. However, that is still dynamic. It's not generated at build time. So if there are any CSS variables that need to be used in there or if there is any logic that needs to be set inside of that. It's not just explicit static arbitrary value. Yeah. It could be dynamic based on other variables that are on the page.

what, like, 11 different colors and or 14 different colors and 11 different variations. Like, it's 240 whatever colors that are available, and then you wanna be able to do different opacities for each of them. So forward slash 10 forward slash 15.

So that's the millions of different combinations. And and obviously those are are generated on on build timing. You only take what you need. But

dynamic based on what you need out of it. So, you know, is it useful for that? Yeah. You could have a triangle mix in or you pass in a color, and you could pass in where you want it to be, you know, top right bottom left, and then it will generate all of the CSS that is needed for that. And it it's extremely complex.

Fluid typography, that's another big one. I've been a huge fan of the container query units, and that is where you set a container on a element and then you get these c q w c q h like you get width and height of your container query and then you can use that to dynamically size things inside of it like text.

So fluid typography, it's still a bit of a pain. You still have to, like, test it and whatnot. And and then also if you want it to be different at different breakpoints or different container query breakpoints, like, if you wanted a medium and a large size container, then you're getting into to a lot of CSS. Again, sticking that all into a mix in was would be really nice.

inside of both mix ins and functions, we are going to need logic. Right? And Yep. You can love it or not, but CSS is a programming language JS as far as I'm concerned.

It's very declarative, meaning that there are no really if statements or looping, but we we do for this, we will need to add looping to the language, right, because there is not really a great way. You can get around looping a lot of times with just dynamic variables, but there are lots of use cases where you simply I just need a loop here. And if you either have to reach for something like like Sass or a preprocessor or you just rewrite a whole bunch of classes ahead of time. But we do have a lot of conditional logic already. Right? Like, we have media queries.

We have CSS is, has, and where Yeah. Which is a lot of it's kinda if statements. Right? Yeah. That's the query thing about that way. Yeah. And, like, style queries is going to allow us to say if it is red, then do this. You'll be able to query things based on their color or based on their size or based on their width. So you can say if it has this specific style applied to it, then apply these following styles, which I think is pretty nifty. And then what else Wes have? Supports, container queries

that kinda blows us wide open to me. It it is because I'm trying to think, like like, what else? If we get mix ins, we get functions, and we get

So That's pretty cool. Like, I'm trying to think, like, what else like, people have wanted to put multiple properties into a single variable. Right? Like, so if you wanted to have dash dash button and you could put 6 or 7 styles in that, but

Yeah. Maybe, like like, objects. Like, what if you had, like, a a variable for a theme? So dash dash theme, and the spec intentionally allows anything to go inside of a CSS variable. So it it's not crazy for us to be able to do that. Like, maybe you could have a dash dash theme, and inside of that have subvariables, you know, background, foreground, border.

Awesome. Alright. Thanks for tuning in. Peace.