SASS has literally changed the way me, and lots of other developers, think about CSS. I mean, c’mon, it’s freakin’ awesome! You can store values in variables, use loops to iterate, call functions, and import other SASS sheets to keep things organized. It’s a game changer.
When I first graduated from college, I had no idea what SASS was or how to use it. It’s almost painful thinking back to those days. I would have a giant style sheet and would have to comment it out into sections. I didn’t realize it then, but after knowing SASS now, coding descendant selectors in CSS is a pain in the ass. The ease of coding descendant selectors and being able to break up the style sheet, and import them, were two major factors in me learning SASS.
Well…and my first job used SASS. That’s a pretty good reason too.
Lighten and Darken
I could go on all day about how awesome SASS is, but I wanted to focus on two built in functions that I’ve come to appreciate recently. The lighten and darken functions in SASS are pretty awesome, if you ask me.
// Lighten/Darken - Color - Amount %
div {
color: darken(#fff, 25%);
background-color: lighten(#000, 10%);
}
These two functions take two parameters, a color and a percentage. If you use the lighten function, it will attempt to lighten the provided color by the percentage given. Same goes for the darken function, except it will attempt to darken the color by the percentage. Pretty simple, right? For me, this has been a life saver.
It’s not secret that I am awful at design. I’m not sure what it is, but I never could get a design out of my brain and onto paper without it looking awful. I mean, c’mon, my first EVER website was almost entirely blue. I thought it was cool then, but I certainly cringe about it now. And…I showed it to people…*shivers*
After I get my main color palette, I struggle immensely with the in between. You know, the little shade differences that you derive from your palette for little things like rollover effects or maybe to make content pop a little more. This is where lighten and darken save me a lot of time and headache. I can come up with a bunch of in-between colors from my main palette using these two functions, and I can easily store them in variables.
// Store in a variable
$color = #00f;
$darker_color = darken($color, 25%);
$lighter_color = lighten($color, 35%);
Brilliant.
The Dark Side
Haha…get it? Darken? Dark side? Sorry, still working on the dad jokes.
I can definitely see the downside to these two functions, and that’s control. You are allowing the SASS compiler to have control picking colors based off an origin and a percentage. I can see how that could stress out a designer. It may depend on the designer, some may welcome the help, but I know others that like to have complete control over the color palette, and that’s okay. I mean, that’s their job, right?
It may be a downside giving up some control, but for a design challenged person like me, it’s not that big of a deal. I want to be able to create different shades easily, and these functions help me out.
A Light Conclusion
Ha…Sorry.
I wanted to write about these two little functions as they recently helped me a lot. A few months ago, I pushed out an update to my anime website. The design changed from a light theme, to a dark one. I had never coded a dark theme website before, so it was different, and I was on the struggle bus when it came to contrasting in between colors.
Darken and lighten certainly helped me out there.
Thanks for hanging out, nerds.