<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
body {
  display: flex;
  height: 100vh;
  margin: 0;
}
div {
  flex: 1;
}

@for $i from 0 through 10 {
  html {
    --color-#{$i}: hsl(85 4% #{$i * 10%});
  }
  div:nth-child(#{$i}) {
    background: var(--color-#{$i});
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.