【Sass】定義されたカラーに対して調整を行う方法

CSSを書く上でもはや必要不可欠ともなりつつあるSass。実はこのSassを使うことで、定義されたカラーに対して「もう少し明るく」や「もう少し彩度を上げる」という記述が可能になります。ベースカラーがあり、ホバー時にはもう少し明るく！等など、色々な場面で使えそうですね！それでは、見ていきましょう。

明るくするlighten / 暗くするdarken

基本的には、Sassの変数を使いカラーを定義し、それに対して調整するという方法がベターかと思います。コードにすると下記のような感じですね。

// カラーを変数にセット
$color: #ea2a2a;

// セットされたカラーに対して10%明るい色で背景色を指定
.hoge {
  background: lighten($color, 10%);
}

// セットされたカラーに対して10%暗い色で背景色を指定
.hogehoge {
  background: darken($color, 10%);
}

このように記述することで、定義されたカラーに対して自動的に調整されコンパイルされるといった流れになりますね。
非常に簡単です！

コンテンツ一覧へ戻る

彩度を上げるsaturate / 彩度を下げるdesaturate

先程の明るさと同様に、カラーを変数にセットしてやってみましょう。

// カラーを変数にセット
$color: #ea2a2a;

// セットされたカラーに対して10%彩度を上げて背景色を指定
.hoge {
  background: saturate($color, 10%);
}

// セットされたカラーに対して10%彩度を下げて背景色を指定
.hogehoge {
  background: desaturate($color, 10%);
}

これで、それぞれ彩度が調整された背景色が指定されます。

コンテンツ一覧へ戻る

今回も別途サンプルを設けましたので、そちらも併せてご確認ください！

サンプルを確認する

ベースカラーに対しての調整のみで全てをカバーするのはもちろん厳しいですが、細々した部分のちょっとした調整には持って来いですね。