Zenn
Closed3

【Dart Sass】lighten()の完璧な代替手段を考える

つるもとつるもと

以下、今後の検討課題 解決した

6/11追記：2つ下のコメントにある通りです。
それ以外は読まなくていいです。読まないでください。恥ずかしいので。

課題

Sassのlighten()の使い勝手が良かったので使い続けたいが、Dart Sassのモジュールシステム（@use）では非対応になっており、将来的な保守を考えると他の方法を模索したい。
最終的には、lighten()と同じ色を返すような関数・手法を探り当てたい。

以下検討中

  • lighten()はHSL色空間での明度調整であるのに対し、color.mix()はRGB空間での色混合のため、同じパーセンテージを指定しても同じ色にならない。
  • color.scale()では明度（$lightness）を調整できるが、彩度（$saturation）の値も指定して調整しないと、lighten()と同じ結果にならない。

$saturationを手動で調整するのが今のところの最適解っぽいが、完全に同じ色にするにはなかなか難しい。　6/10追記：これは完全に勘違いで、彩度は関係なく明度だけの問題だった。

パーセンテージが同じでも同じ色にならない様子

Dart Sass (scss) の基本的な使い方 - あとでこの記事読む

つるもとつるもと

解決！

lightenAlt()という代替関数をつくった

@function lightenAlt($color, $amount: 0%) {
  $new-lightness: color.lightness($color) + $amount;
  @return color.change($color, $lightness: $new-lightness);
}

//使い方
.item {
background-color: lightenAlt($base, 30%);  //lighten($base, 30%);と同じ結果
}

解説

lighten()は指定した％分の明るさが加算される

SASS公式ドキュメントのlighten()の解説を読むと、

The lighten() function increases lightness by a fixed amount,

「一定の値が増加する」との記述があり、次のように具体的な説明も付いていた。

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

つまり、明度20%の色に対してlighten()で60%の値を入れると、明度80%になる。
20% + 60% は 80%、の足し算。

てっきり、20%の60%ぶんを足す（20% + 20%×0.6）のだとばかり思っていた。

足し算ということは、明度40%の色に対して50%の値なら90％に、
明度40%の色に対して70%の値なら110％になる。（けど、100%が#ffffffなので超過しても#ffffffの色のまま変化なし）

そういうことなら値を足し算する関数を作れば済む話だな！と思って作ったのが冒頭に挙げたlightenAlt()。

lighten()とcolor.scale()の挙動の違い

さきほどまで勘違いしていた、

てっきり、20%の60%ぶんを足す（20% + 20%×0.6）のだとばかり思っていた。

↑この計算で色を返すのがcolor.scale()。

Dart Sassのモジュールシステムを作るにあたって、「普通は割合で明るさが増えていくのを想像するよね、んじゃ直感的な挙動しないやつは非推奨にして、新しく割合で増えるやつ作るね」という話で非推奨にされたのがlighten()。作られたのがcolor.scale()。

このスクラップは3ヶ月前にクローズされました