2

一段时间以来，SASS 中的颜色算法已被弃用，并且在该工具的较新版本中不可用。我目前正在迁移一个具有颜色算术的旧项目。

例如，较旧的 scss 文件具有以下内容：

background: $body-bg-color-dark-light + 10;

$body-bg-color-dark-light是一个简单的 RGB 值（如#FF1100）

使用新的 SASS 颜色函数来重现与上述完全相同的功能的替代方法是什么？请注意，我们添加的是一个简单的整数而不是百分比。

我尝试过的替代方法是：

background: lighten($body-bg-color-dark-light, 10); 
// Note that '10' is not a percentage in the previous example

这不会产生所需的颜色。此外，由于lighten只darken接受百分比，因此我对大于100我正在迁移的代码库中的值感到困惑。

另一个问题是我无法获得旧版本的 SASS（或为此找到哪个版本）来确定通过简单地将整数添加到颜色来准确生成什么，以便我可以应用新的颜色函数来生成同样的结果。

编辑：

我设法挖掘了该 SCSS 的旧编译版本。该样本中的一个原始值是#020507。

再加10上产生的结果#0c0f11。看起来它正在向每个颜色通道添加10（或十六进制）。A

4

1 回答 1

2

编辑：感谢 OP 提供的新示例，可以确认第一个假设：

#020507 + 10 = #020507 + #0A0A0A = #0C0F11

我会在这里做一些猜想，但我似乎找不到与你类似的例子。

在有关运算符的 SASS 文档中，您可以阅读：

在 Sass 历史的早期，它增加了对颜色数学运算的支持。这些操作分别对每种颜色的 RGB 通道进行操作，因此添加两种颜色将产生一种颜色，其红色通道的总和作为其红色通道，依此类推。

以下是此处和此处给出的一些示例：

#020406 + #020406 = #04080c
#020406 * 2 = #04080c
#102030 + #010203 = #112233
#101010 * 2 = #202020

在您的示例中，将一个整数添加到颜色中；假设它是一个十进制值，它的十六进制值将是A.

- 第一个假设（正确）

如果我们按照文档中的说明进行操作，则意味着：

#FF1100 + 10 = #FF1100 + #0A0A0A

根据这个计算器，结果将是：

#FF1100 + #0A0A0A = 1091B0A

我不太清楚十六进制值是如何工作的，但是由于结果不是有效的颜色，我将假设红色通道忽略加法（因为它已经具有最大值）。所以最后我们有：

#FF1100 + 10 = #FF1B0A

现在，使用 SASS 颜色函数的等价物将使用adjust-color：

adjust-color(#FF1100, $red: 10, $green: 10, $blue: 10);

- 第二个假设（不正确）

该值仅按原样添加，而不是单独添加到每个通道。因此，使用相同的计算器：

#FF1100 + 10 = #FF1100 + A = #FF110A

等价于ajust-color：

adjust-color(#FF1100, $blue: 10);
于 2021-08-25T13:45:11.043 回答