テキストリンクの色を一括で設定しちゃうmixinを作ってみた話 #mixin

テキストリンクの色を一括で設定しちゃうmixinを作ってみた話 #mixin

そんな大した代物でも何でもないんですが、scssの練習がてらに作ってみたテキストリンクの色を一括で設定しちゃうmixinです。

リンクカラーを設定するmixin

せっかくhslカラーが使えるようになったということなので、それを利用してホバー時に準補色、訪問時にに近似色になるように設定してみました。

使用時はscssファイルの中にmixinを使ってよびだしてくれればOKです。

こんな感じですね。
$colorのところに、テキストリンクカラーとして設定したい色を使います。#で始まる16進数のでも、rgbでもhslでもお好きなものでどうぞ。

コンパイル後は$colorで設定した色に対して色相が移動します。

 

hsl色空間での利用について

今回近似色やら準補色やらを簡単に算出するために、hsl色空間を使ってみました。hsl色空間について詳しく知りたい方はこちらもどうぞ。

HSL色空間 色相(hue)

hsl色空間では、上の図のように360°を一周として色相を作っています。彩度や明度は選んだ色の中の空間として考えらています。

例えば、0°の赤を選んだ場合は、下の図のようになります。

hsl色空間 彩度と明度

なので、黒をhslを使って表したいときは、hsl( 色相, 彩度, 明度 )の順番で並んでいるので、hsl( 0, 0, 0)と表記すればいいわけです。まぁ、黒の場合は、色相が何であれ、彩度と明度を0にすればいいんですがね。同様に白の場合は、彩度と明度を100にすれば完了です。

今回のmixinでの仕様について

こんな感じで今回の色設定には、hslを使っているわけですが、リンクの基本色に対して

今回sassの関数adjust-hueを使って、色相の角度を変えています。
たとえば、基本のリンクカラーをに設定したとします。

そうすると、hover, active, focus時には

hsl色空間 150°色相移動

色相が時計回りに150°分移動したものに変わります。
またvisited時には

hsl色空間 30°色相移動

色相が時計回りに30°分移動したものに変わります。

だいたいよくある設定の色に変わるように色相を調整したらこんな感じになった次第です(笑)


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top