Create a color theme mixin with Sass

css has come a really long way but i still use sas in a lot of my projects and today i want to look at one of the reasons that i do and so what we're going to do is look at how we can create a color theme mix-in that's also going to include an if-else statement that gives it an extra little superpower hello my friend and friends i'm so glad you've come to join me once again and if you're new here my name is kevin and i'm here to help you fall in love with css and if i can't get you to fall in love with it i'm hoping to at least help you be a little bit less frustrated by it and today we're going to be going and looking at a different way we can author our css by using a little bit of sas so let's jump right into it and you can see i've set things up a little bit here and i just want to say that these properties that i've set here these variables i should be saying these could be custom properties and custom properties and sas actually do play very well together but in this case i'm just leaving them as variables and if you've never seen even sas variables before they're just a way to sort of save things and you can see i've set up a few other things we're going to come back to this in a minute now don't worry too much about what we're seeing here but the basic idea of what i want to be able to do is to come here and be able to set a background color and let's say that's my primary color primary and when i set my color primary well the background's a little bit dark so then i'd probably be coming in and setting a color which is going to be my color neutral light and then it should change it to there and then we'll just copy this paste it down here make this one the dark and make this one my secondary and so any time basically second dairy we've got to spell things properly and basically anytime i you know this could be one simple color theme here and then this could be another nice simple color theme down there and what i'd like to be able to do with these is just to have that happen automatically so we can create a mix in for that so i'm gonna do that at mixin and we can give it a name and i'm just gonna call it color scheme we're going to give it to two arguments but basically let's just grab this to start with and put it in this mix in and we're going to delete you and we're going to delete this one here and what the mix in here right now is doing is if i wanted to use it i can come here and say at include color scheme and it's going to apply that color scheme there so it's applying the background color of primary which is this one here and then my color neutral light which is this one right here and you can see that it's working this isn't a very useful mix in though because we can't change what it's doing if i want to use it again well it's going to do the exact same thing every time i use it which is kind of not the best so we can step the game up on this one a little bit by coming here and giving it arguments that it can accept so i'm going to give it a text argument and a background argument bg and then i don't want to set necessarily what it's going to be here but i'm going to say that my text should be this one right here my text will get put here and my background will get set right here and so we say background like that and so if i come down here and i do add include color scheme and then i could even say my text is going to be yellow and my background is going to be black and it's going to set the two of them right there and let's just try that again here we could come and say now in include color scheme and then we could say uh purple and i don't know efe just you know throw a couple colors in there until very light gray it barely changed but it has changed and so we could create our own very simple color schemes here but what i've done up here is i've actually created two color schemes or three color schemes i should say i've created my scheme default my scheme secondary and then a scheme accent gradient and we're gonna get to this one a little bit later because we're gonna have to play around with stuff to get this one to work but for these two you can see i've set this is what i want my light text color with my primary and i want my neutral dark with my secondary color and so to be able to do that there is a gotcha on this because let's come here and on this one if i came here and i just say scheme secondary it's not actually going to work or scheme primary they're not actually working or of course that's not scheme primary i called it scheme defaults we're getting an error let's go with schema defaults you have the right one but it's still not going to work um and the reason it's not working is because you can actually see here we're missing an argument for background and this is in codepen that it's this is jumping up and that's because right now we've only supplied it with one argument we're giving it one thing scheme default and we haven't actually declared anything for the background here and so let's just come here and write red so things compile and change and the background will change the text color is not actually changing though because it's going well we're giving it two different colors for there and so you know if i did this as black it just all will look black the text color is not going to change now because this is an invalid property and to really show you that that's happening in codepen we can come and go to view compiled css and if we find that one you see color and it's listing out the two colors that we have here that's a problem we don't want that to happen obviously and there is a way to fix that when you have a variable that has multiple different pieces to it this is called a list and when we want to bring a list in here but actually say that this isn't one argument it should act as multiple arguments we can do that and this is it's an arbitrary number of arguments we can put three dots here and by putting those three dots there you can see it actually works now and what it's saying is okay i know that this scheme default is actually going to contain multiple things so i'm going to apply this one to the first and i'm going to apply this one to the second one and if there was a third it could be applied as a third argument and so on and so forth so here we can take this scheme default and let's go down here and then we can do scheme secondary and there you go you can see that it's working perfectly fine so that's already a nice start but what if i wanted to use my scheme accent gradient well that's actually going to break things again so let's come and bring that in put the dot dot because we have multiple different things coming in and you can see the background has gone to white there's no errors so let's go and see what's actually happened so view compiled css and my background color is getting set to three properties huh that's annoying why is that happening well if we come and look at my scheme accent gradient we have my neutral dark for the dark color and then i have this complex gradient and my complex gradient is over here and this might seem like overkill these like uh variables is you know referencing other variables referencing other variables but as you build out more complex systems this can actually be really really handy and it's sort of a tokenization of things that can be really useful um so this complex gradient is giving it three different values and that doesn't work for a background color i want that for a background gradient so how can we do that well that's where the if else statement can come in so we want to come here and what we basically want to say is if if we have if we have a single bg color then set a background color and if we have multiple bg colors set a gradient so how can we do that well luckily we can do if else statements as i said so we can do an add if and then we want to say how can we look for how long something is well to be able to do that in sas i'm going to come all the way up to the top of my file and i'm going to do an at use and my at use is going to be sas colon list and what this is doing is sas has a whole bunch of built-in modules that are included in it but we can't use them unless we bring them into the file that we're currently working on so by starting it with the sas and putting the colon i'm saying i'm using one of the built-in sas modules and then i just happen to be using the list module and the list module opens up a whole bunch of doors you can do lots of stuff with it but in this case what i want to do is if list dot length and so here i'm saying i'm using the length is a function and all the modules just include a whole bunch of functions that's all the things it can do so i'm going to say i want the length function that is part of my list module and i want to say my bg so list length bg if it's equal to 1 well then i want to set a background color and so that's what we have here but then if we have multiple colors we want to set a gradient so then we can come here and say else and i mean else this could be you could do an if else again for more than one rather than is equal to one and this is two equal signs it's just this font makes it look like one big one um i'm assuming that you wouldn't have zero background colors um so that's you know i think it's going to be safe enough to use here and so here then we can do a background image and do my linear gradient gradient let's just say two to top left and then we could put in my vg here and there it's fixed it and you can see that it's actually working now and so that and that's because the bg here it can pull in all those colors and in this case it's actually okay that it pulls in the three of them and it just comma separates them because that actually works with what we have here so it's not going to cause any issues and as you can see the gradient is working and you could actually you know let's come in and make a color scheme accent gradient we could also have a simple gradient and then so we have complex gradient then this is my simple gradient because we do have one there and then let's come and change this one to scheme simple gradient which will look very similar but we should see it has changed over and then we get my simple gradient coming in and of course you could even come in here and do your own just like we had before or i could say that we're going to do black white yellow purple it won't look very nice but we have black text and then a white to yellow to purple oh except that doesn't work and that's because what this is doing is it's applying multiple arguments we are only accepting text and background and now it's saying well we have text we have background and i don't know what these are supposed to be so i can't use them another interesting thing with mix-ins though when you're doing this is you could actually take all of this wrap them around in their own set of parentheses and then it works so i don't know the whites in the bottom corner yellow in the middle up to the purple on the side so you could come in and create your own color scheme with this as well and if we bring this all the way down to just being a purple it will still work but set it as a background color rather than being the gradient and yeah a nice little robust mix-in that we can create there using if and else statements and this type of thing is part of what i'm going to be covering in my new course beyond css where we are going to deep dive sas and here's an example of what the portal will look like and fun things with it are these interactive code blocks so i can actually come in here and change this number hit save and actually see what it compiles out to on this side so we can see the sas here and the compiled css on this side there's a lot of text in the course uh there's also videos the videos can even be searched so if i look here for the word parent it shows up on the timeline every time i said the word parent in this video as a quick example of that so yeah this is something that i'm working on it's not only going to be going into sas but it's going to look heavily at sas how we can use it to create scalable css we're going to look at post css as well we're going to get build tools we're also gonna be looking at design systems and even more than just that so if you'd like more information there is a link just down below where you can find more about that and with that i want to say a very big thank you to my supporters of awesome jan johnny stewart tim and doug as well as all my other patrons for their monthly support and of course until next time don't forget to make your core on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 37,035

Keywords: Kevin Powell, css, css theming, front-end, frontend, html, sass, sass color theme, sass if else, sass lists, sass mixin, scss, scss color theme, scss if else, scss lists, scss mixin, theming, tutorial

Id: EKHd0Dcc4IY

Length: 11min 34sec (694 seconds)

Published: Thu Apr 28 2022