【Sass】色を操作するのに便利な10つのSass関数を紹介！

Sassを簡単に説明すると「CSSの拡張版」で、CSSにはない多くの便利な機能がありますね。

その中でも色を操作するための関数がとても便利ですので、紹介していこうと思います！

特によく使用する関数3つと、知っておくと便利な関数7つをピックアップしましたので、ぜひ参考にしてみてください。

【実案件でも頻出】明るさ・透明度を操作するための3つの関数

まずは実際の案件対応でもよく使う3つの関数を紹介します。

これらは特に使いやすいので、覚えておくとかなり便利です。

lighten()で色を明るくする

指定した色よりも明るい色を作成できるlighten()関数です。

個人的には、「ホバー時にボタンの色を明るくしたい」といった場合によく使います。

// lighten()の公式
lighten($color, $amount);

$colorには色、$amountには0%~100%の間の数値を指定してください。

数値を高くすればするほど、色が明るくなります。

.lighten-10 {
  background-color: lighten(#cc6699, 10%); // →結果1
}

.lighten-30 {
  background-color: lighten(#cc6699, 30%); // →結果2
}

• 基準
• 結果1
• 結果2

darken()で色を暗くする

指定した色よりも暗い色を作成できるdarken()関数です。

こちらは、特定の色よりも少し暗めの影をつけたいという場合によく使えますね。

// darken()の公式
darken($color, $amount);

$colorには色、$amountには0%~100%の間の数値を指定してください。

数値を高くすればするほど、色が暗くなります。

.darken-10 {
  background-color: darken(#cc6699, 10%); // →結果1
}

.darken-30 {
  background-color: darken(#cc6699, 30%); // →結果2
}

• 基準
• 結果1
• 結果2

rgba()で透明度を調整する

rgba()関数で、色の透明度を操作できます。

CSSにもrgba()はありますが、#ffffffなどの16進表記は使えないため、わざわざrgb値に変換する必要がありますね。

/* CSSでの失敗例 */
rgba(#cc6699, 0.5); /* 16進表記は使えない */

/* CSSでの成功例 */
rgba(204, 102, 153, 0.5); /* RGB値に変換する必要がある */

Sassのrgba()関数なら、16進表記やredなど色の名前を直接指定しても正常に動作します。

// rgba()の公式
rgba($color, $alpha);

$colorには色、$alphaには0~1の間の数値を指定してください。

0は透明で、1に近づくにつれ不透明になっていきます。

.rgba-25 {
  background-color: rgba(#cc6699, 0.25); // →結果1
}

.rgba-75 {
  background-color: rgba(#cc6699, 0.75); // →結果2
}

• 結果1
• 結果2
• 基準

【覚えておくと便利】色を操作するための7つの関数

ここからは使用頻度は高くないですが、覚えておくと便利な関数を紹介していきます。

saturate()で彩度を上げる

saturate()は色の彩度を上げることができる関数です。

色をより鮮やかにしたい場合に使えますね。

// saturate()の公式
saturate($color, $amount);

$colorには色、$amountには0%~100%の間の数値を指定してください。

数値を高くすればするほど、彩度が上がります。

.saturate-25 {
  background-color: saturate(#cc6699, 25%); // →結果1
}

.saturate-50 {
  background-color: saturate(#cc6699, 50%); // →結果2
}

• 基準
• 結果1
• 結果2

desaturate()で彩度を下げる

desaturate()は色の彩度を下げることができる関数です。

基準の色よりも落ち着いた色を指定したいときに使えそうです。

// desaturate()の公式
desaturate($color, $amount);

$colorには色、$amountには0%~100%の間の数値を指定してください。

数値を高くすればするほど、彩度が下がります。

.desaturate-25 {
  background-color: desaturate(#cc6699, 25%); // →結果1
}

.desaturate-50 {
  background-color: desaturate(#cc6699, 50%); // →結果2
}

• 基準
• 結果1
• 結果2

invert()で色を反転する

invert()は色を反転することができる関数です。

// invert()の公式
invert($color);

$colorには色を指定してください。

.invert {
  background-color: invert(#cc6699); // →結果1
}

• 基準
• 結果1

complement()で補色を返す

complement()は指定した色の補色を返す関数です。

// complement()の公式
complement($color);

$colorには色を指定してください。

.complement {
  background-color: complement(#cc6699); // →結果1
}

• 基準
• 結果1

grayscale()でグレースケールにする

grayscale()は指定した色をグレースケールに変換して返す関数です。

// grayscale()の公式
grayscale($color);

$colorには色を指定してください。

.grayscale {
  background-color: grayscale(#cc6699); // →結果1
}

• 基準
• 結果1

adjust-hue()で色相の角度を変更する

adjust-hue()は指定した色の色相を変化させることができる関数です。

// adjust-hue()の公式
adjust-hue($color, $degrees);

$colorには色、$degreesには-360deg~360degの間の角度を指定してください。

.adjust-hue-ng-90 {
  background-color: adjust-hue(#cc6699, -90deg); // →結果1
}

.adjust-hue-ng-45 {
  background-color: adjust-hue(#cc6699, -45deg); // →結果2
}

.adjust-hue-120 {
  background-color: adjust-hue(#cc6699, 120deg); // →結果3
}

.adjust-hue-240 {
  background-color: adjust-hue(#cc6699, 240deg); // →結果4
}

• 結果1
• 結果2
• 基準
• 結果3
• 結果4

mix()で2色の中間色を返す

adjust-hue()は指定した色の色相を変化させることができる関数です。

// mix)の公式
adjust-hue($color1, $color2, [$weight]);

$color1, $color2には混ぜ合わせたい色、$weightには0%~100%の間の数値を指定してください。

$weightに数値を指定しない場合は、デフォルトで50%の設定になるので、半分ずつ混ぜた色が返ってきます。

.mix-25 {
  background-color: mix(#cc6699, #ffffff, 25%); // →結果1(白が強め)
}

.mix-50 {
  background-color: mix(#cc6699, #ffffff, 50%); // →結果2(ピンクと白が半々)
}

.mix-75 {
  background-color: mix(#cc6699, #ffffff, 75%); // →結果3(ピンクが強め)
}

• 結果1
• 結果2
• 結果3
• 基準

【まとめ】Sassで色を操作するための10つの関数を紹介

色を操作するためのSass関数10選を紹介しました。

案件対応をしていると、「少し明るめの色がほしい」「影に少し暗めの色を使いたい」といったことがよくあります。

CSSならわざわざカラーコードを調べる必要がありますが、Sassなら関数を使うだけで簡単に色を調整できてすごく便利です！

特にlighten(), darken(), rgba()は多くの場面で使用するので、ぜひ覚えておいてください。

あわせて読みたい

【Sass勉強法】Sassの独学に使用した教材2つを紹介【本と動画教材】 HTML/CSSを学習している人は、Sassというのを聞いたことがあるのではないでしょうか。 Sassとは、CSSを効率的に書けるように設計された言語です。 Sassを導入することで…