こんにちは。
Sublime Text + Sass + Compass のおかげで仕事が楽しくてしょうがないアオイです。
今日はSassでのカラー設定に便利なツール「Sass Color Generator」をご紹介します。
SASS/SCSSでは基本カラーを設定しておくと超便利
ところで、Sass（SCSS）を使ってる方ならmixinでリンクカラーやベースカラーなど一括設定してると思います。
「この色をちょっとだけ暗くしたい」「ホバーした時の色をちょっと明るく」など、ベースの色から明度をちょっとだけ調整する場合次のように書いてます。
これだと後で修正する時もmixinで設定したカラーを変えるだけなので便利ですよね。
_mixin.scss (共通の設定)
@mixin linkColor($color) {
color: $color;
&:hover, &:active, &:focus {
color: lighten($color, 30%);
}
}
$base-color: #87cefa;base.scss
a{
@include linkColor(#ff1493);
}
h2{
color: $base-color;
background-color: darken( $base-color, 15% );
}base.css
a{
color:#ff1493;
}
a:hover,a:active,a:focus{
color:#ffadd9;
}
h2{
color:#87cefa;
background-color:#3eb0f7;
}#ff1493 の明度を30％上げたのが #ffadd9
#87cefa の明度を15％下げたのが #3eb0f7
とそれぞれ出力されますが
カラーコードを見ただけじゃあどんな色かわからない！
lighten / darkenで私はとりあえず「10％」とか適当に書いてみて、後で微調整とかめんどくさいことをやっていたので
「あぁ、指定した色の「明度」「彩度」のカラーバリエーションが見れたらなぁ」
といつも思っていました。
でももう大丈夫！
「Sass Color Generator」を使えばいいんです。
明度・彩度のカラーバリエーションが一覧で見れて便利なツール
前置きが長くなりましたが・・・。
「Sass Color Generator」は、カラーコードと%の数値を入力すると
そのカラーの%ごとの明度や彩度のカラーバリエーションを一覧で見ることができます。
使い方っていってもすごく簡単なので説明なんていらないくらいですが制作者様のページをどうぞ。
Sassの色生成ジェネレーターを作りました | Arch
