Sassメモ：関数でカラースキームを自動生成する。

Sassには標準で便利な関数が用意されています。
標準関数は膨大にありますが、一例として色に関する関数を使ってカラースキームを作る記法を紹介します。

下記はSass記法例。

$mainColor: #339999;
$lightColor: lighten($mainColor,20%);
$darkColor: darken($mainColor,20%);
$compColor: complement($mainColor);

.mainColor {
  color: $mainColor;
}
.lightColor {
  color: $lightColor;
}
.darkColor {
  color: $darkColor;
}
.compColor {
  color: $compColor;
}

$mainColor にメインカラーを設定し、 lighten 、 darken 、 complement の3つの関数にメインカラーを投げています。

出力されるCSSは下記。

.mainColor {
  color: #339999;
}
.lightColor {
  color: #66cccc;
}
.darkColor {
  color: #194d4d;
}
.compColor {
  color: #993333;
}

lighten で明るく、 darken で暗く、complement で補色を生成します。

明暗の比率も変数化すればより統一性が取れるので良いかもしれません。

$mainColor: #339999;
$blightness: 20%;
$lightColor: lighten($mainColor,$blightness);
$darkColor: darken($mainColor,$blightness);
$compColor: complement($mainColor);

メインカラー1つ決めてしまえば色の知識やセンスに関係なく最低限のカラースキームが作れますし、メインカラーを変えればカラーパターンの量産もできるので、色に悩むことが無くなります。