Sass has a set of powerful control directives that I find fascinating: @if, @for, @while, and @each.

In my “hue bump” experiment, I used a @for loop in Sass along with the nth-of-type CSS pseudo class to bump up the hue of each word.

$hue-bump: 15;

@for $n from 2 through 6 {
    h1:nth-of-type(#{$n}) {
        color: hsl($n * $hue-bump, 100%, 50%);
    }
}

I looped from the second header (h1:nth-of-type(2)) to the sixth header (h1:nth-of-type(6)) adding 15 (or the $hue-bump amount) more to the hue number in each header’s hsl value.

Check out this Pen!