0

我开始练习 sass，我想在课堂上用红色、绿色和蓝色的百分比来设置任何颜色。因此，类名color-50-10-60表示 50% 红色、10% 绿和 60% 蓝，数字只能以 10 比 10 的数量变化，所以只能有 10、20、30、40 之类的数字……最多 100 ，如果我更改具有类名称的数字必须更改颜色，我知道我必须使用mixin来获取它但我只是不明白如何实现目标。有什么帮助吗？

4

1 回答 1

1

我认为为每种 RGB 颜色创建一个特定的类是不可能的（技术上可行，但没用）。

我们必须从文字开始。SASS 是一个预处理器，即发生在一切之前：在你的 CSS、你的 HTML、你的 JAVASCRIPT attr()...还有很大的限制https://caniuse.com/#search=attr() ...)。

如果你写这样的东西<div class="color-50-10-60">，在你的 CSS 中必须已经有那个类的定义。因此，当您在创建 SCSS 之前编写 SCSS 时<div>，您必须想象您将使用该类。

但是，您知道，您可以创建有限范围的颜色（如果您真的需要，可以使用特定的 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

在您编辑之后，这对您来说是一个可能的解决方案：它适用于一系列颜色（正如我在评论中所说，它适用于具有 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：

于 2018-11-08T08:49:50.020 回答