Color Variables

[00:00:00]
>> Sarah Drasner: Color variables. So a lot of people might not know why you would use a color variable. What's really nice about using color variables is you keep things consistent across your application. For instance, I once worked at an unnamed company who where we had a major release for this giant sprawling design over 4,000 pages were updated and the night before the release they decided to change the brand color and because we have build the system well I change it in one place.

[00:00:35]
And then proper get it to the entire system, and I went home and drank wine. That was a really good day. That could have been a really bad day, that could have been a catastrophic, catastrophic day. But if you use something this, and I'm not just talking about like one brand color, but if you.

[00:00:53]
Define all of your color variables in one place and then use it throughout a system. It can really save you a lot of time and upkeep. So you don't have to do it that way but highly recommended especially if you're working across a really large application. There's also native CSS variables which are now I think pretty well supported, maybe not an IE, I can't remember.

[00:01:17]
But I think it's in Edge too now. The nice thing about, people are like why would I use this CSS variables if I could just use Sass and things like that. But the nice things about these variables is, they're living. They are alive. You can actually work with them in JavaScript, and JavaScript will understand what it is even if you define it somewhere else.

[00:01:38]
That's pretty nice, when you're creating it in SAS or SCSS, it's really compiling down and JavaScript doesn't really have a concept of it. So that's really a cool thing between the two. The nice thing about things like SAS though is that you can do color mixing directly in SAS.

[00:01:56]
You could say take this color and lighten it by 10% or whatever and it will be able to do that which can be really handy if you want to keep things really consistent looking. Let's say you want to make grays and a bunch of different stops. You can do that programmatically and that's probably even better than you messing around with some eye dropper tool or something.

[00:02:20]
So here are some of those color variables you can do, you can mix things, you can adjust the hue, you can lighten things, darken, saturate. You definitely don't have to work with color this way, but this is an option for you if you wanna work with color programmatically.