Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
adjust-rgb()というSassの関数を作った
Sassには色調節の関数が色々用意されています。その中にadjust-color()というRGBとHSLで色を割合ではなく指定量だけ調節できる汎用関数があるんですが、RGBをそれぞれ同じ量だけ明るく(暗く)したい時の引数指定が面倒です。というわけでそれをラップするadjust-rgb()という関数を作ってみました。 @function adjust-rgb($color, $dec: 1) { $num: 255 * $dec; @return adjust-color($color, $red: $num, $green: $num, $blue: $num); } 第一引数で色を、第二引数で係数を指定します。係数は-1から1の間で、負の値を指定すると黒に近くなり、正の値を指定すると白に近くなります。 .test { color: adjust-rgb(#369, 0.2); // re
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
