基于渐变色标为许多 css 类定义颜色

Question

我有一个渐变色标，我想为其定义一组类。

为了分解它，我有一个可以跨越 0 和 8.5 的值，步长为 0.25。我总共有 34 种不同的颜色 (8.5/0.25 = 34)，我想在这个渐变色标中跨越。因此，我需要定义 34 个不同的类，每个类都比我在数据库中的值小一些。因此，如果我找到 2.25 的值，我希望在我的渐变范围内获得颜色 29.4% ((2.25 * 100 /) 8.5 = 29.4)。如何使用 css 类来做到这一点？

我这样做的原因是为我放置在地图上的图标添加颜色。这些值是速度，基于速度我需要在地图上的图标中添加一个类，其中包含与速度的“值”相匹配的背景（颜色）？

我在过去 30 分钟内尝试使用谷歌搜索，但我发现自己找不到任何可以使用的东西。

如果这看起来很直观，我愿意尝试其他可以帮助我实现所需的解决方案。

如果这很重要，我将使用MapBox 作为我的地图解决方案。

Answer 1

尝试使用 SCSS。在 SCSS 中，您可以使用变量和数学。