背景色に応じて最適な文字色を自動判定する SCSS mixin を書いてみた

Sass、そしてSassy CSS (SCSS) を読んで、俄然 SCSS に興味が出て、新しいプロジェクトで試しています。「CSS でこう書けたらいいのになぁ」という記法をサポートしていて、ものすごく便利です。特に mixin で関数を用意すると非常に強力。

というわけで、表題のような mixin を書いてみました。まぁ、そんな大げさなものでもないですが。

明るさが 50% 未満であれば、文字色は白に、50%以上であれば、文字色は黒になります。使い方はこんな感じ。

色を変えたいときは $bgcolor の値を変えるだけで済むので、らくちんです。