I Love the NEW CSS Functions

Custom functions are finally available in CSS and they let you do some amazing things. For example, you can create a function that gives you responsive sizings. You can create functions to change colors. And all of this code that you see up here that looks like an absolute mess, I'm going to explain it so it makes absolute sense and cover advanced topics such as function overloads and how these functions work very differently than something like a JavaScript function. Welcome back to WebDev Simplified. My name is Kyle and in this video we're going to be diving into the minutia of things like function overloads. But before we can dive into that, we first need to understand how functions work at the very baseline. To create a function in CSS, all you need to do is use the at@ function keyword. Now in your editor, you're probably not going to get a lot of syntax highlighting because this is a very new feature, but type in at function and then give it a name. This name must start with two dashes. So for this particular case, we're going to create a name for a function that transparentizes something. So we're just going to call it transparent. There we go. And this function is going to take two parameters. The first is the color that we want to make transparent. And again, these all must start with that double dash syntax because that's how you create a custom variable or function in CSS. And then we're going to create an amount that we want to make this by transparent. So for example, we can take a color and we can make it 50% transparent by passing in 50%. Then what we can do inside of our function is we can set a variable called result. This is a property right here. And this is the property returned by your function. So instead of using a keyword of like return, we're using result and setting that as a property. And that's because an important thing to understand about functions is they follow the normal cascade of everything else in CSS. It won't be apparent how that works with this first function, but we'll dive more into that in just a little bit. So what we can do to actually create a function for this to make a color more transparent is we could for example use an HSL function. We could say from and we want to get it from that baseline color. So we're going to say from var color. This is using relative colors in CSS. If you're unfamiliar with that, I have a whole video diving into things like relative color. I'll link in the cards and description for you. But what we can do with this is we can then specify that we have our parts of HSL. So we have HSN and L. And now we can modify these however we want. So for example, I can keep those all the same. And then I can add on a transparency by just getting that amount just like that. Now if I give that a quick save, we'll make this a little bit smaller. We've now essentially created a function that allows us to create a transparent color. So here I can use that function by just putting in front of it those double dashes because that's the name of my function. So type out the name of your function and then you just pass it your parameters just like you would in something like JavaScript. So we can pass a color of red and we can pass an amount of.5 for example. And now my box will be 50% transparent. But you see there's a little bit of a problem. It's not quite working. I believe that's cuz there should not be a comma here. We give that a save. You can see now that does work. We get a 50% transparent box. If I change it to 10% it almost entirely disappears. 90% it's pretty much full red. So essentially, we're able to make any color partially transparent, and we're able to hide away this kind of complicated and ugly code. And as your code gets more and more complicated, this code right here, you can hide away inside of a function, and then just use a nice little bit of code here to call out to that. You can even set default values in your function. So, for example, after this name amount, let's say I want my default value to be 50%. I can just put 0.5 like that. And now, if I leave off that value, it'll default to.5. You can see now my box is 50% transparent. I can even set a default color. For example, in here, let's set a default color of blue. And now I won't pass anything. And now I'll get a blue color that is 50% transparent. Now, before we start diving into some of the more complicated features inside of functions, I want to talk about how this deals with cascade and why we use this fancy result keyword. Essentially, the reason we use a result keyword is because unlike JavaScript where as soon as you return, nothing else executes in CSS, we always execute things from top to bottom and we always choose the last available value as the correct value. For example, if inside of here I just come in, I say background red. Well, this red background is the last time I define background. So that's what the color of my background gets set to. It's the same thing here with result. If I come down and I say that my result is going to be some color like orange, you can now see that my background color has changed to orange because this is the last value for my result that's being returned. This is really important because now we can do things with media queries and so on to add additional values for my result. So I could say here I could put a media query. my width is less than or equal to 200 pixels, then my result is going to be orange. Otherwise, my result will default to this value. So, since my screen is super small, we get an orange value. But if I increase the size of my screen, you can see it changes to that blue value. So, we're able to change this dynamically based on these media queries. And what the last result is that we return. So, you almost need to rewire your brain a little bit if you're used to JavaScript where the first return is the one that occurs. This is always going to be the last result that evaluates is the one that you use. Now, in our case, we don't really need to worry about that because we don't have multiple results. That's just an example for you. Also, something that's really important is the way the cascade works for defining your function. If, for example, we have two functions with the exact same name, the last defined function is going to be the one that actually gets used. So, here, if I set my result to red, you can see my box is a red color because it's using the last defined functions. And this is not super important when you just have your code like this because when you have everything in one layer like this, it's really easy to see what's going on. But when you start dealing with multiple different layers and using CSS layers, which if you're not familiar with, I'll link a full video in the cards and description for you. But it allows you to define essentially different layers. So we could have a layer that's like theme, and we could have a layer that's like base, for example. These are our two different layers that we're going to have. And then we can put one function inside of one. So we're going to say at layer base. And we're going to put a function inside of here. And we're going to do the exact same thing for theme. Just like that. And now if we give that a quick save, it doesn't matter what order I define these inside my code. Since my base layer is always before my theme layer, this function is the one that happens last. So this works with specificity. It's almost like a function overload in JavaScript. By using my function and defining it in multiple places, I'm essentially overloading the function to have a brand new definition inside this theme version. 99% of the time though, you're probably not going to mess with that and you're just going to have one version for all of your different functions. Now, another important thing to understand about functions is you may want to put some type of type information inside them. One thing that's really nice is a lot of newer CSS features that allow you to do these kinds of custom things allow you to define a type for them so that hopefully as your dev tools improve, they can give you warnings and errors saying, "Hey, this is not the correct type variable." So, what I can do inside here is directly after my variable name, I just put a space and then I can put some angle brackets and inside of there, I can put my type. So, this is a color, so I'll give it the type of color. This amount right here is a number. So I'm going to give it a type of number. And now essentially I've created types for these things. I have a color type and I have a number type. So my amount is always a number and my color is always a color. Now if I save everything still works perfectly fine. I can come in here and pass in red and.5 and now I get a red background. Now this is really nice because as the dev tools improve for this feature and becomes more stable and hopefully the tools inside of even VS Code improve, you'll then get warnings. So, for example, if I try to pass 100 pixels into here, I would get a warning. Now, currently, since this is very new in experimental, there's no warnings, but in the future, there would be. Also, since I have number here, that means I can't specify a percentage cuz technically in CSS, a percent is different than a number. So, if you want to be able to define essentially multiple different types that something can be, you need to put them inside of a type function. So, you can type in type just like that with a parenthesy. And then you can specify your two types. So, we're going to say that we have a number type and we have a percent type just like that. Percentage. There we go. And let's close off that type. Just like that. And now we have two variables. One is a color and the next one down here is a number or a percentage. And this should just have the little pipe symbol just like that. You can even take it a step further and define the return type value as well. So I can say returns is a special keyword here that tells me this is the type of what my return is. And I'm going to say that it's going to return a color as well. So now I can specify not only the parameter types, but also the return type as well. And then finally specify my result right here. This gives me full control over every single thing that's happening inside of my function type-wise, which is really great for when browsers and the dev tools start to actually implement this a little bit better. Now, I kind of want to scrap what we have right now, and I want to talk about another way that we can use this. And it's kind of an advanced way, and I think it's really something that could be quite useful. I'm going to create a function called responsive. And this responsive function is going to take in a small size. It's going to take in a medium size, and it's going to take in a large size. And the important thing is I'm not specifying any type on these because they're essentially all the same type. I don't really care what I use this for. Essentially, I just want to be able to specify a small, medium, and a large value for something. And we'll get rid of this return section here. And the way that I envision using this is, for example, when I want to get responsive values, I could just come in here and I can say, okay, I'm going to have blue, orange, and green or some other color. It doesn't really matter. And now on small screen sizes, it should use blue. On medium, it should use orange. And on large screen sizes, it should use green. So now all I need to do is define how that will work. Well, first of all, we'll come in here with a default. and we'll say by default it's going to be my large size. Then I can come in here with a simple media query and I can say if my width is less than or equal to let's say 200 pixels then what I want to do is I want to use the result that is my small size. There we go. And I can do essentially the exact same thing for my medium size as well. This one we're going to say where my width is 200 pixels and we're going to say it's less than that and we'll say 300 pixels over here. So anything that is less than 200 pixels is small. Anything between 200 and 300 is medium. Otherwise, it'll default to large. And you could write these media queries in a different way, but you can see here we're on the small screen size, we get blue. When we increase, we get orange. And as we increase to a larger screen size, we get green. So, we're able to go through all three of these different colors. And we can even make this more advanced by, for example, saying, you know what, if we don't pass in a large value, it should just use the medium value the entire time. Currently, you can see it doesn't work because we're not passing in all of our different values. So, let's give this a default value. You can give it anything you want. I'm just going to give it a default value of no value. I'll do the same thing for medium, even though it doesn't really make sense for medium. So, I'll just do it for large, actually. There we go. So, that at least cleans this up. But when I go to the large screen size, you'll notice my background color disappears because the value is set to no value. So, I can use an if statement here to essentially use the medium value as a fallback if I want. So here I can just say if and I want to say if my style for the large value is equal to no value that means it is my default value currently and I just need to change this around so that this is inside the parentheses. There we go. So if my large value is set to no value then I want to specify my value to use the medium. So we can say medium here. Otherwise I want to default using else here to the large value itself. So we'll just say large just like that. Now, I'll make this a little bit wider so it all fits on one line for you to see it easily. But essentially, I'm using this fancy if syntax in CSS, which you're unfamiliar with. I'll link a video in the cards and description for you. But you can see here if the style is large, no value. That means I didn't pass in a value. We use medium. Otherwise, we use the large. And if we increase our screen size, we go blue, orange. And then finally, when we get to the larger screen size, you can see it still stays as orange. And that's just because it doesn't matter what size we are. As long as we're medium or large, it's going to be that medium color since I didn't pass anything along. Now, if you enjoyed this deep dive into the CSS functions, I'm going to highly recommend you check out some of my other advanced CSS topics right over here. And if you want to take a recap through all the different selectors, including advanced CSS selectors, I have a completely free CSS selector cheat sheet linked down in the description below. With that said, thank you very much for watching and have a good