I know Sass isn’t the only game in town when it comes to higher-order CSS styling languages. However, it’s the one supported by the Jekyll theme I’m using, so I’ve been dabbling in it.
One thing I love is the color functions that Sass provides. They make it really easy to stick with a color scheme, because you can use them to style your site with just a few colors without having to manually calculate RGB values. Jekyll is a static site generator, so these values get calculated at compile time. For example, it allows me to define my blog’s color scheme like so:
You can do more with Sass than just change the brightness of colors.
darken functions behave as you would expect, making the
color brighter or dimmer. Since this is the “neon” tapir, my base color is
rather bright. I use the
desaturate function to keep the link color
more closely resembling the brand color, then I
darken the result for
readability. For the pull quote color, I wanted it to stand out some, so
I used the
adjust-hue function to go a certain distance around the color
wheel. In my case, it turned a blue-green link color into a purer blue.
I figured out these values through trial and error, by reading through documentation and trying out individual functions on their own. However, I found a site that provides an interactive guide, A visual guide to Sass and Compass Color Functions. The site only offers a color picker, so I couldn’t get quite the exact hue I wanted. Nevertheless, a site like this greatly speeds up the process.
For example, I didn’t see the application of the
shade function to my color
scheme until I started looking at this site. However, I found in experimenting
that some of these color functions return results that can’t be used by other
ones. For example,
lighten(shade($color, 20%), 10%) throws an error in one of
the Jekyll converters.
The site showed me the effects of various functions, as well as allowing me to tweak the values without having to rebuild my site to see the changes. Had I used this site originally, I feel sure I would have ditched the neon green secondary coloring much faster. I think the goldenrod makes for a more readable design while still fitting in with the “neon” theme. Let me know what you think.