thumbnail

【Sass】@useで使える色の関数まとめ

Sassに新しいモジュールシステムが導入されるため、従来通りのSassの書き方が出来なくなるといった話は耳にしたことがあると思います。有名なところでいうと、@import文の廃止と@useの導入などでしょうか。その他にも関数にモジュールシステムが適用され、その書き方も大きく変わることになります。今回はSass関数の中でも便利な「色の関数」について全てまとめ、新しいモジュールシステムに対応した使い方を解説していきます。

そもそも新しいモジュールシステムとは

従来のSassはどのファイルからでも自由に、他のファイルに定義された変数やミックスインを使うことが出来ました。

このように、どこからでも参照可能な範囲ををグローバルスコープといいます。従来はSassの関数もグローバルスコープを持ち、特別な宣言をしなくても呼び出すことが出来ました。

.text {
  color: lighten($color, 30%); //lighten()をそのまま呼び出せる
}

一見便利そうなグローバルスコープですが、非常に多くの問題があります。変数がどこで宣言されているか分からなくなったり、知らないうちに変数を上書きしてしまったり…etc。

プロラミング経験者ならグローバルスコープの厄介さをご存知かと思います。

そこでSassに新しいモジュールシステムが導入されました。ファイルごとに異なるスコープを持つようになったので、グローバルスコープの厄介さから開放されます。「〇〇のファイルのXXという変数を使います」と宣言(@use宣言)をしないと他のファイルの変数を使えなくなりました。

モジュールシステムによって組み込み関数にも宣言が必要になります(一部例外あり)。map系の関数はsass:map宣言、色系の関数はsass:color宣言が必要になりました。これにより、従来使っていた関数も新しい書き方で書く必要があります。

@use "sass:map";    //map系の関数を使う宣言
@use "sass:color";  //color系の関数を使う宣言
@use "sass:list";   //list系
@use "sass:string"; //文字列系

本題ですが、タイトルの通りこの記事ではcolor系、すなわち色の関数について全て紹介します。

色のパラメータを取得する関数

色を渡すと、色に関するパラメータを返します。使い方が同じなので一挙に紹介します。

関数名意味
color.red($color)RGB値のRの値を取得(0 〜 255)
color.green($color)RGB値のGの値を取得(0 〜 255)
color.blue($color)RGB値のBの値を取得(0 〜 255)
color.hue($color)HSL値のH(色相の角度)を取得(0〜359deg)
color.saturation($color)HSL値のS(彩度)を取得(0 ~ 100%)
color.lightness($color)HSL値のL(明度)を取得(0 ~ 100%)
color.whiteness($color)HWB値のW(白色度)を取得(0 ~ 100%)
color.blackness($color)HWB値のB(黒色度)を取得(0 ~ 100%)
color.alpha($color)アルファ値(透過度)を返す(0 ~ 1)

ほとんどが従来からある関数の前にcolor.がついただけです。

@use "sass:color";
$color: rgba(#45f98c, .3);

@debug color.red($color); //69
@debug color.green($color); //249
@debug color.blue($color); //140
@debug color.hue($color); //143.66deg
@debug color.saturation($color); //93.75%
@debug color.lightness($color); //62.35%
@debug color.whiteness($color); //27.05%
@debug color.blackness($color); //2.35%
@debug color.alpha($color); //0.3

色のパラメータを変える関数

RGB値や彩度、明度、透過度などを変える関数です。その前に注意点があります。

以下の関数はモジュールシステムで採用されていません
・色相を変える adjust-hue()関数
・明度を変えるlighten()関数とdarken()関数
・彩度を変えるsaturate()関数とdesaturate()関数
・透過度を変えるopacify()関数とtransparentize()関数

理由は望み通りの色調整がなかなか出来ないからだそうです。

代わりに以下の関数を使うことが推奨されています。

関数名意味
color.change(パラメータ)色のパラメータを置き換える
color.adjust(パラメータ)色のパラメータを固定値で増減させる
color.scale(パラメータ)色のパラメータを相対値で増減させる

従来はそれぞれchange-color()関数、adjust-color()関数、scale-color()関数として定義されていました。使い方も同じですが、次の節から関数の使い方とパラメータの意味を詳しく説明します。

color.change()関数

指定した色のパラメータを置き換える関数です。例えば「Rを200に、Bを120、Gは変えない」といったことや「色相を200度、彩度が30%、明度を50%」といった指定が可能になります。置き換えられるパラメータは以下の通りです。

パラメータ意味値の範囲
$redR値0 ~ 255
$greenG値0 ~ 255
$blueB値0 ~ 255
$hue色相0 ~ 359
$saturation彩度0 ~ 100%
$lightness明度0 ~ 100%
$whiteness白色度0 ~ 100%
$blackness黒色度0 ~ 100%
$alpha透過度0 ~ 1

異なる色空間のパラメータを同時に操作してはいけません。
RGB値、HSL値、HWB値それぞれの範囲内でのみ操作します。

@use "sass:color";
$color: rgba(134,160,234,0.4);

@debug color.change($color, $red: 100, $green: 50); //rgba(100, 50, 234, 0.4)
@debug color.change($color, $hue: 200, $saturation: 40%); //rgba(156, 193, 212, 0.4)
@debug color.change($color, $hue: 100, $blackness: 30%, $whiteness: 20%); //rgba(94, 179, 51, 0.4)

color.adjust()関数

指定した色のパラメータに固定値を加算、減算します。例えば「Rを+20、Bを-120、Gは-30」といったことや「色相を-20度回転させ、明度を30%下げて彩度を50%上げる」といった演算が可能になります。パラメータはchange()と同じです。減算もできるので、マイナス値も指定できます。

パラメータ意味値の範囲
$redR値±0 ~ 255
$greenG値±0 ~ 255
$blueB値±0 ~ 255
$hue色相±0 ~ 359
$saturation彩度±0 ~ 100%
$lightness明度±0 ~ 100%
$whiteness白色度±0 ~ 100%
$blackness黒色度±0 ~ 100%
$alpha透過度±0 ~ 1

彩度や明度などパラメータを下げたい場合はマイナス値を指定して減算します。

注意点はchange()と同じです。同じ色空間で操作してください。

@use "sass:color";
$color: rgba(134,160,234,0.4);

@debug color.adjust($color, $red: 100, $green: 50); //rgba(234, 210, 234, 0.4)
@debug color.adjust($color, $hue: 200, $saturation: 40%); //rgba(245, 255, 113, 0.4)
@debug color.adjust($color, $hue: 100, $blackness: 30%, $whiteness: 20%); //rgba(167, 167, 167, 0.4)

color.scale()関数

指定した色のパラメータを-100% ~ 100%の相対値で変えます。RGB値、アルファ値も-100%~100%で指定します。「Rを50%上げてGを30%下げたい」といったことや「彩度を50%落として明度を20%上げる」といった演算ができます。ただし、上記2つの関数と違い色相に関する演算はできません。

@use "sass:color";
$color: rgba(134,160,234,0.4);

@debug color.scale($color, $red: 10%, $green: -50%); //rgba(146, 80, 234, 0.4)
@debug color.scale($color, $saturation: 40%); //rgba(126, 156, 242, 0.4)
@debug color.scale($color, $blackness: 30%, $whiteness: 20%); //rgba(158, 160, 164, 0.4)

色を変換する関数

色を一定の規則に基づいて変換する関数です。

関数名意味
color.grayscale($color)色をグレースケールに変換
color.complement($color)色を補色に変換
color.invert($color, $weight)色を反転する
@use "sass:color";
$color: rgba(134,160,234,0.4);

@debug color.grayscale($color);
@debug color.complement($color);
@debug color.invert($color, $weight: 30%); //0 ~ 100%で重みを指定

色を混ぜる関数

従来のmix()関数と同じ使い方です。

関数名意味
color.mix($color1, $color2, $weight)$color1を$weight(0~100%)の割合で$color2と混ぜる

アルファ値も混ぜることが出来ます。

@use "sass:color";

@debug color.mix(#0000, #ffff, 10%); //rgba(255, 255, 255, 0.9)
@debug color.mix(#0000, #ffff, 50%); //rgba(255, 255, 255, 0.5)
@debug color.mix(#0000, #ffff, 90%); //rgba(255, 255, 255, 0.1)

色を設定する関数

おそらく一番使うであろう関数ですが、毛色が違うので最後のセクションに持ってきました。
rgba()関数、rgba()関数、hsl()関数、hsla()関数はグローバルスコープを持ちます。つまりcolor.の呼び出しが必要ありません。これはCSSでも実装されている兼ね合いからです。HWB値を指定する関数はcolor.を必要とします。

関数名意味
rgb($red, $green. $blue)RGB値を設定
rgba($red, $green. $blue, $alpha)RGB値+アルファ値を設定
hsl($hue, $saturation, $lightness)HSL値を設定
hsla($hue, $saturation, $lightness, $alpha)HSL値+アルファ値を設定
color.hwb($hue, $whiteness, $blackness)HWB値を設定

HWBがわからない人はこちらの記事を参考にして下さい。

まとめ

以上、モジュールシステムに対応した色の関数をまとめました。彩度や明度などパラメータを変える関数はモジュールシステムで実装されませんでしたが、ほとんどの関数が従来の関数にcolorを付けただけです。ただし、CSSにもあるRGB値やHSL値を設定する関数はグローバルスコープのままなので注意しましょう。

参考

sass:color (公式ドキュメント)

https://sass-lang.com/documentation/modules/color