我开始练习 sass，我想在课堂上用红色、绿色和蓝色的百分比设置任何颜色。所以，类名color-50-10-60表示50%红色、10%绿色和60%蓝色，数字只能在10比10的数量上变化，所以只能有10、20、30、40这样的数字……最多100，如果我更改具有类名的数字必须更改颜色，我知道我必须使用mixin来获取它但我只是不明白如何实现目标。有什么帮助吗？
【问题讨论】：
标签： html sass scss-mixins
我认为不可能（技术上可行，但没用）为每一种 RGB 颜色创建一个特定的类。
我们必须从文字开始。 SASS 是一个预处理器，即发生在一切之前：在你的 CSS、你的 HTML、你的 JAVASCRIPT 之前......而且他（SASS）在逻辑上无法知道你将在 HTML 中写什么，但只能想象（CSS attr() 有潜力，但也有很大的局限性https://caniuse.com/#search=attr() ...)。
如果您编写类似<div class="color-50-10-60"> 的内容，则在您的 CSS 中必须已经有该类的定义。因此，当您在创建 <div> 之前编写 SCSS 时，您必须想象您将使用该类。
但是，您知道，您可以创建有限范围的颜色（如果您真的需要，可以使用特定的 mixin 来创建 10-20 个颜色类）。当然，您不能全部创建它们，因为 RGB 有 16,777,216 个可能的颜色值，并且... 想创建 1600 万个类真是太疯狂了 (^_^;)
然后您必须首先创建您的<div class="color-50-10-60">，然后读取这些值并创建一个 CSS 类来管理它们：为此，您可以使用 javascript。这是你实现目标的方式。 :)
但是，我知道，您需要 CSS 解决方案。然后...使用<div style="color:rgb(50,10,60);">：它是跨浏览器的，而且效果很好！ ;)
编辑 1
在您编辑之后，这对您来说是一个可能的解决方案：它适用于一系列颜色（正如我在 cmets 中所说，它适用于具有 3 个变量的循环......但对我来说这太疯狂了！:-) ):
@for $i from 1 through 10 {
@for $j from 1 through 10 {
@for $k from 1 through 10 {
.color-#{$i*10}-#{$j*10}-#{$k*10}{
color:rgb($i*10,$j*10,$k*10);
}
}
}
}
我为你创建了一个sassmeister：
【讨论】：