css変数を備えたカラーシェード生成：系統的な方法

question

css変数を使用してsassのdarken（）関数の機能を模倣できます。定義された色のシェードを生成しますか？ - color-primary：＃f00; -color-primary-darker：HSL（var（ - color-primary）h s calc（l-5））; -color-primary-darkest：hsl（var（ - color-primary）h s calc（l-10））; }

ここにその仕組みがあります：

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}