scssの変数、制御構文とhsl表記色

Sass: Syntactically Awesome Style Sheets
　scssはCSSのメタ言語Sassの記法一つです。どのあたりが上位言語かというと、CSSをより便利に記述できるような記法と組み込み関数を増やして、scssファイルをコンパイルすることでcssファイルを作成するあたりが、上位言語です。
　CSSは元から大して変数、制御構文などがなくとも十分使えるものでscssならではのコードはなかなか思いつきません（色を変数化してパレット風にするのは便利なくらい）。この記事ではhsl表記の色と組み合わせることによってscssならではのコードを紹介します。

　上のJSFiddleのCSSを構成しているscssコードが次です。16行目からが特にscssです。変数としての色$baseの色相を組み込み関数adjust-hue()でイテレータに合わせて動かし、イテレータの番号を名前に含むクラス名のdivの高さを変更しています。10行少々のコードで生のCSSでは長大になりそうな離散的グラデーションを実現できました。また、変数$base, $diffの変更だけで色相の起点、刻み幅を変更可能で多少のデザイン変更ならすぐに対応できます。

.flex-row {
  display: flex;
  height: 8em;
  width: 30em;
}

.col-box {
  display: flex;
  flex-direction: column;
}

.box {
  width: 2.25em;
  border: solid darken(#fff, 20%);
}

$base: hsl(0, 100%, 50%);
$diff: 30;
@for $i from 1 through 7 {
  .box-l-#{$i} {
    @extend .box;
    background: adjust-hue($base, ($i - 1) * $diff);
    height: #{$i}em;
  }
  .box-r-#{$i} {
    @extend .box;
    background: adjust-hue($base, -($i - 1) * $diff);
    height: calc(100% - #{$i}em);
  }
}