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

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

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

@mixin suitable-text-color($bgcolor) {
    @if lightness($bgcolor) < 50 {
        color: #fff;
    } @else {
        color: #000;
    }
}

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

header {
    $bgcolor: #0099cc;
    background-color: $bgcolor;
    @include suitable-text-color($bgcolor);
}

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>