将 LESS 变亮和变暗转换为 CSS 颜色混合

Question

我正在尝试将一些 LESS 颜色函数（变亮/变暗）转换为使用 CSS 颜色混合函数，以便我可以利用 CSS 变量。

我有一个在内部使用这些的依赖项，并编写了一个 NPM 安装后脚本来自动转换它们。转换工作正常，但我面临的问题是输出关闭。

以下是输出示例：

对于颜色混合，我使用：

color-mix(in srgb, white 5%, var(--my-color)); // lighten(@mycolor, 5%);
color-mix(in srgb, white 50%, var(--my-color)); // lighten(@mycolor, 50%);

知道如何才能更接近地匹配我从 LESS 中看到的内容吗？

Answer 1

:root {
  --clr-base: #68b5cb
}
body {
  display: flex;
  gap: 2px;
  font-family: sans-serif;
}
.d1 {
  color: white;
  background-color: var(--clr-base);
  flex: 1;
  text-align: center;
  padding: 1em;
}
.five {
  background-color: color-mix(in srgb, var(--clr-base) 95%, white);
}
.fifty {
  background-color: color-mix(in srgb, var(--clr-base) 50%, white);
}

<div class="d1">Base</div>
<div class="d1 five">mix 1</div>
<div class="d1 fifty">mix 2</div>