html - 基于渐变色标为许多 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 类来做到这一点？

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

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

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

如果它有任何重要性，我将使用 MapBox 作为我的 map 解决方案。

Answer 1

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