Atom.io styles for rainbow indent guides. Yay rainbows!

styles.less

/*
 * Atom Stylesheet
 *
 * .generate-indents(): makes pretty indent guides.
 *    Enable 'Settings' -> 'Show Indent Guide' and taste the rainbow!
 *
 */

// Default and base colors for indent guides
@indentColor: hsla(345, 100%, 55%, .3); // Manipulate this to make pretty
@defaultColor: hsla(1, 0%, 80%, 0.80); // Color for undefined indents

// Recursively generate alternating color bars for indent guides
//     @num: total number of colored rows (others will get @defaultColor)
//     @steps: how many steps of color. Repeat until @num is reached.
//     @i: index for recursive calls.
.generate-indents(@num: 1; @steps: 1; @i: 0) when (@i < @num) {
    @this_num: @i + 1; // @i counter is zero indexed, so kick it up
    @this_step: mod(@i, @steps) + 1; // @steps drives subdivison frequency
    @this_step_multiplier: mod(@i, @steps) / @steps; // for percentages
    @step_percent: percentage( 1 / (@num/@steps) );
    @this_step_percent: @this_step_multiplier * @step_percent;
    @num_groups: @num / @steps; // How many 'groups' will repeat
    @this_group: ceil( @this_num / @num * @steps ); // current group
    @this_group_multiplier: @this_group / @steps; //
    @this_group_percent: percentage(@this_group_multiplier);

    &:nth-child(@{this_num}) {
        color: fadein(
            spin( @indentColor, round(@this_step_multiplier * 360) ),
            @this_group_percent
        );
}
.generate-indents(@num:@num; @steps: @steps; @i:(@i + 1));
}

.tree-view {

}

.editor {

  .indent-guide {
    // default indent level color
    color: @defaultColor;

    // Start generating colors!
    // @num should be larger than and divisible by @steps.
    .generate-indents(@num:12; @steps: 6;);
  }
}

.editor .cursor {

}