I looked all over for something like this, before finally stumbling upon a stackoverflow post with an example SASS style.
Sadly, it didn’t seem to work for me, so I tweaked it, made a mixin out of it, and voilà! This thing is customizable up to a point, and pretty handy to achieve some nifty automagic effects which would be a pain to code manually. It’s used on this site to achieve the lovely colour gradient, from blue to green, on the titles in the archive and home pages. It uses CSS3 hue changes to shift the colour, but any other effect which can be incremented will do as well. Color and hue both have their own SASS functions, adjust_hue and adjust_color, which easily allows you to add onto the existing value, but the same effect can be achieved easily with opacity, blur, saturation, lightness, etc.
In this case, we’ll look at hue. First, let’s set our base colour, the original, starting point color which we’ll change incrementally:
$baseColor: #4f94cb
That’s the light blue that I chose as a main color for the blog. We want to shift it gradually towards green. We start by using the @for SASS function, which is basically a standard foreach, and we tell the function how many times it should run, in this case from element number 1, up to and including element number 10. Element 1 is our original, unmodified colour. Element 10 is the last element on the archive, the tenth post. Our function will loop through all of them, and since we’re using from – through instead of from – to, the tenth element will also be included.
@for $i from 1 through 10
ul.posts-list li.post:nth-child(#{$i})
h2, a
color: adjust-hue($baseColor, -($i * 8%))
a:hover
color: adjust-hue($baseColor, -($i * 12%))
$i: $i + 1
At the end of our loop, before closing, we add +1 to our integer variable so the function counts through them all. The negative is to shift the hue towards green instead of pink.
And that’s basically it. I dumped it in my mixins file but there is literally no other fiddling required. To actually make it into a reusable mixin, we would do something like this:
@mixin hueShift($num1, $num2, $startColor, $adjustPercent, $i:1)
@for $i from $num1 through $num2
&:nth-child(#{$i})
background-color: adjust-hue($startColor, -($i * $adjustPercent))
$i: $i + 1
ul.posts-list li.post
+hueShift(1, 10, $baseColor, 8%)
Unfortunately, because of the way SASS mixins handle variables and object definitions, I couldn’t find a way to let you add something like “.target:nth-child($i) a”, like I did with the non-mixin version. There’s probably a way to do it, though how useful that could be for something like this, I’m not sure.
If you’d like to give it a shot though, feel free to share your findings in the comments!