Css 用于颜色级别的Bootstrap 5映射

在Bootstrap 5文档中，_colors.scss具有以下类：

.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }

.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }

.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }

and so on...

每个颜色级别在_variables.scss中定义

---

如何使用.scss循环和贴图生成这些类，而不是手动为每种颜色编写每个级别？

这是否回答了您的问题？即使标题是关于角度的，主题也和你们的一样。不是真的。基本上，我希望所有这些类都能从变量中定义的颜色自动生成。这能回答你的问题吗？即使标题是关于角度的，主题也和你们的一样。不是真的。基本上，我希望所有这些类都能从变量中定义的颜色自动生成。