SASS Tutorial (build your own CSS library) #13 - Functions

Key Takeaways

all right then gang so the next thing i want to talk about is functions in sas and functions are kind of like mix-ins but they're very different as well whereas a mix-in will give us a load of different properties or group them together and also taking arguments for those properties a function instead will return normally a single value it might take in an argument it might do some manipulation with that and at the end it returns a single value which we can sometimes use for properties so this is a function right this is a built-in function this lighting function in sas and what that does is taking some arguments and returns to us a value which we use for the background color so what we're essentially going to do is create a new function a custom function like this that takes in maybe an argument or it might not need to take an argument and then returns a value now to demonstrate this i'm going to create another variant of our button so we have the normal buttons for each of the different colors which is button hyphen primary or secondary et cetera then we have the outlined variant now we're going to create a third one which i'm going to paste in called button complement hyphen whatever the key is so primary secondary etc now we're still including the button mixing and passing in the value as the color so it's still going to do exactly the same as this so far however this time what we're going to do is override the color of the button so we're going to have a color property right here and to do this we want to create a function which is going to get us a complementary color to whatever we use right here so if it's primary we're going to get a complementary color for that so to do this let's create a functions file inside the shinobi folder so underscore functions.scss okay then so to create a function we say at function then we give it a name i'm going to call it light hyphen comp so it's a complementary color which we're also going to lighten and inside this function we're going to take in an argument which is going to be a color so we could pass in the color primary for example and it's going to find us the complementary color for that color and also lighten it once we have it so inside here i'm going to create first of all a variable and we can do that inside functions we can just create variables for inside this function and this is going to be called complement now to get this complementary color first of all we are just going to use a built-in function in sas which is called complement and we can pass in the color so it gets us the complementary color for whatever we pass in right here the second thing we want to do is lighten that so i'll create another variable which is called light and then complement like that and i'm going to set that equal to oops i think this is spelt complement not complement i'm going to set that equal to another built-in function lighten but passing this value right here the complementary color so now we're doing two things with our value that we pass in and then at the end all i'm going to do is return so that's at return to return a value and it's going to be this variable right here the light complement okay and that's all there is to it so we've taken in a color we've done a little bit of manipulation and it could be more complex than this i didn't want to do something too complex because i just want to demonstrate how we use these functions and return the values at the end of it so it takes in that doesn't manipulation and then returns a value at the end so now i could first of all include the functions at the top over here i'm going to say at import and it's the functions file we want i'm going to save that and then inside this button components for the color of this complement button i'm going to call that function so all i need to do is say light hyphen comp which is the name of the function and we can use it remember because the button component inside the index is imported after the functions so we can use it inside the buttons file we're going to pass in the value which is the color so that could be the primary color or purple or red or something else in our color map all right then i also want to give this a background color on hover so i'm going to say background hyphen color and again we're going to call that function and we'll say light hyphen comp and passing the vowel so when we hover over this the background color is going to change to this to begin with just the color of the text is this all right so let's save that and head over to our index file so that we can use this new variant of the button inside the template so if we scroll down to the bottom of the buttons i'm going to paste in two more so two anchor tags the first one has a class of button hyphen complement hyphen purple so it's gonna run the function for this purple color and find a complementary color for that and the second one is button hyphen complement hyphen primary so i'm going to save this now and then preview it in a browser now i can see those two buttons but they don't seem to be working so let me just go back and have a look at what's going on here and we can see in the terminal that we get this error and it says we need an amount basically for the lighting function we're not passing that in as a second argument so we need to pass in how much we basically want to lighten this buy in a percentage so i'll say 30 percent and i'm going to save that and then hopefully there's gonna be no error and now we can preview this in a browser and we can see these two buttons right here so the text at the minute is the complementary color which is also a bit lighter to the background and when we hover over it they switch around awesome