Sibling selectors with Sass

Have you ever wanted to just automatically generate sibling selectors automatically increasing the CSS property value. Instead of writing multiple selectors by hand, to get something like the following CSS:

.graph-bar-vertical li { 
  left: 0; }

.graph-bar-vertical li + li {
  left: 10%; }

.graph-bar-vertical li + li + li {
  left: 20%; }

.graph-bar-vertical li + li + li + li {
  left: 30%; }

.graph-bar-vertical li + li + li + li + li {
  left: 40%; }

.graph-bar-vertical li + li + li + li + li + li {
  left: 50%; }

.graph-bar-vertical li + li + li + li + li + li + li {
  left: 60%; }

.graph-bar-vertical li + li + li + li + li + li + li + li {
  left: 70%; }

.graph-bar-vertical li + li + li + li + li + li + li + li + li {
  left: 80%; }

.graph-bar-vertical li + li + li + li + li + li + li + li + li + li {
  left: 90%; }

Use Sass snippet, like the one below. Obviously, for just a couple of values it’s not a big deal, but if you wanted to generate hundreds of values (not that improbable — especially if you plot graphs), I believe you’ll find it pretty useful.

.graph-bar-vertical li { left: 0; }

$increment: 10;
@for $i from 0 through 8 {
	$li: li;
	@for $j from 0 through $i { 
		$li: #{$li} + li;
	}
	$k: $i+1;
	.graph-bar-vertical #{$li} { 
		left: #{$k*$increment*1%}; 
	}
}

Let me know if it works!