Material Designを取り入れたカラースキームをSassで運用する

blog20151123

つい最近GoogleのMaterial Designのリファレンスを読みました。

Introduction – Material design – Google design guidelines

ちょうど良い機会だったので、
色彩設計からコーディングへの落し込みの際のワークフローを見直してみました。
今まではカラーコードはCSSに直書き、かつ雰囲気で色を置いておりとても設計とは言いがたい現状だったので、
これで自分の中でも綺麗に整理ができたように思います。

Coolorsでカラースキームを作成

2015-11-23 19_37_31

Photoshopのcoolorus等のプラグインや他のWebサービスなど色々とやり方はあると思うのですが、
GUIが直感的なことと、scss形式で書き出せることから私はCoolorsを選びました。
(当然作成したカラースキームはWEBサービス上で保存を行うことができます)

Coolors – The super fast color schemes generator!

Coolorsを利用して以下の4色について制定します。

Primary Color (メインカラー)

サイトの主となる色です。

Accent Color(アクセントカラー)

Primary Colorに対するアクセントカラー。
近似色は原則使用せず、Primary Color上に配置した際に文字通りアクセントとなる色を選ぶ。

Dark Color(ダークカラー)

サイトおいて最も暗い色をのせる場合に使用する色。
主にテキストや背景などに用いる。

Light Color(ライトカラー)

サイトおいて最も明るい色をのせる場合に使用する色。
主にテキストや背景などに用いる。

設定し終えたら、scss形式でExportします。

カラースキームをSassで関数化する

定義したカラースキームをシステマチックにCSSで運用するためにsassで関数として登録します。
そのためにもまず、先ほどExportした値を変数として設定します。

[sass]
$primary-color: #ff0000; //任意のプライマリーカラー
$accent-color: #00ff00; //任意のアクセントカラー
$light-color: #ffffff; //任意のライトカラー
$dark-color: #000000; //任意のダークカラー
[/sass]

Function: primary()

設定した$primary-colorをSass内で関数として用いることができるようにします。
折角関数にするので、Primary Colorに加えて明暗それぞれ1トーンずつ指定できるように調整します。

[sass]
//////////////////////////////////////////////////////////
// 1. Primary Color
//////////////////////////////////////////////////////////

// 1 -> Lighten Tone
// 0 -> Default Tone
// -1 -> Darken Tone
// 1,-1 以外の値は全て0として適用

// function
@function primary($value:0) {
@if $value > 0 {
@return lighten($primary-color, 25%);
}
@else if $value < 0 {
@return darken($primary-color, 25%);
}
@else {
@return $primary-color;
}
}
[/sass]

Function: accent()

$accent-colorについても関数を作成。

[sass]
//////////////////////////////////////////////////////////
// 2. Accent Color
//////////////////////////////////////////////////////////

// 1 -> Lighten Tone
// 0 -> Default Tone
// -1 -> Darken Tone
// 1,-1 以外の値は全て0として適用

// function
@function accent($value:0) {
@if $value > 0 {
@return lighten($accent-color, 25%);
}
@else if $value < 0 {
@return darken($accent-color, 25%);
}
@else {
@return $accent-color;
}
}
[/sass]

Function: scheme()

$dark-color$light-colorを元にしてカラースキームを作成する関数です。
googleのマテリアルデザインに準拠したトーン設定で5段階のトーンが指定できるようになっています。
意図的に使用者が細かくトーンをきることができないような仕様にしました。
これにより、今までよりも比較的楽に配色の管理ができるのではないかと思っています。

[sass]
//////////////////////////////////////////////////////////
// 3. Color Scheme
//////////////////////////////////////////////////////////

// function
@function scheme($value:0) {
$scheme: (
5 : 100%, // Light Base Color
4 : 100%, // Light Text
3 : 70%, // Light Secondary Text / Icons
2 : 30%, // Light Disabled / Hint text
1 : 12%, // Light Dividers
0 : null,
-1: 12%, // Dark Dividers
-2: 38%, // Dark Disabled / Hint text
-3: 54%, // Dark Secondary Text / Icons
-4: 87%, // Dark Text
-5: 100% // Dark Base Color
);
@if $value > 0 and $value < 6 {
@return darken($light-color, ( 100% – map-get($scheme, $value)) * 0.5);
}
@else if $value < 0 and $value > -6 {
@return lighten($dark-color, ( 100% – map-get($scheme, $value)) * 0.5);
}
@else {
}
}
[/sass]

カラースキームをまとめたものをパーシャル化する

ここの使い方は人それぞれだとおもいますが、私はカラースキームに関する設定をまとめたものを
パーシャル化_color.scssしてメインのscssにインポートしています。
また、$primary-color $accent-color $light-color $dark-color等の変数は、 設定値をまとめた_variables.scss に記述して使用しています。

_color.scss

[sass]
//———————————————————————————–
//
// color.scss
//
// 1. Primary Color
// 2. Accent Color
// 3. Color Scheme
//
//———————————————————————————–

// Color Settings
$primary-color: #ff0000; //任意のプライマリーカラー
$accent-color: #00ff00; //任意のアクセントカラー
$light-color: #ffffff; //任意のライトカラー
$dark-color: #000000; //任意のダークカラー

//////////////////////////////////////////////////////////
// 1. Primary Color
//////////////////////////////////////////////////////////

// 1 -> Lighten Tone
// 0 -> Default Tone
// -1 -> Darken Tone
// 1,-1 以外の値は全て0として適用

// function
@function primary($value:0) {
@if $value > 0 {
@return lighten($primary-color, 25%);
}
@else if $value < 0 {
@return darken($primary-color, 25%);
}
@else {
@return $primary-color;
}
}

//////////////////////////////////////////////////////////
// 2. Accent Color
//////////////////////////////////////////////////////////

// 1 -> Lighten Tone
// 0 -> Default Tone
// -1 -> Darken Tone
// 1,-1 以外の値は全て0として適用

// function
@function accent($value:0) {
@if $value > 0 {
@return lighten($accent-color, 25%);
}
@else if $value < 0 {
@return darken($accent-color, 25%);
}
@else {
@return $accent-color;
}
}

//////////////////////////////////////////////////////////
// 3. Color Scheme
//////////////////////////////////////////////////////////

// function
@function scheme($value:0) {
$scheme: (
5 : 100%, // Light Base Color
4 : 100%, // Light Text
3 : 70%, // Light Secondary Text / Icons
2 : 30%, // Light Disabled / Hint text
1 : 12%, // Light Dividers
0 : null,
-1: 12%, // Dark Dividers
-2: 38%, // Dark Disabled / Hint text
-3: 54%, // Dark Secondary Text / Icons
-4: 87%, // Dark Text
-5: 100% // Dark Base Color
);
@if $value > 0 and $value < 6 {
@return darken($light-color, ( 100% – map-get($scheme, $value)) * 0.5);
}
@else if $value < 0 and $value > -6 {
@return lighten($dark-color, ( 100% – map-get($scheme, $value)) * 0.5);
}
@else {
}
}
[/sass]

あとがき

自分しか得しないような関数ですが、これからぼちぼち運用してみようとおもいます。
マテリアルデザインのもう一つの肝でもあるシャドウ関係もどこかのタイミングでmixinにしようと思っています。