使用类的名称在 scss 中使用 mixin 给出特定的颜色

Question

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

Answer 1

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

我们必须从文字开始。 SASS 是一个预处理器，即发生在一切之前：在你的 CSS、你的 HTML、你的 JAVASCRIPT... 之前，他 (SASS) 不能逻辑上知道你将在 HTML 中写什么，但只能想象（CSS attr() 有潜力，但也有很大的局限性 https://caniuse.com/#search=attr() ...）。

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

但是，您知道，您可以创建有限范围的颜色（10-20 种颜色的 class 具有特定的 mixin，如果您确实需要的话）。当然你不能全部创建它们，因为 RGB 有 16,777,216 可能的颜色值和... 想创造1600万classes(^_^;)

真是疯了

然后您必须首先创建您的 <div class="color-50-10-60">，然后读取这些值创建 CSS class 来管理它们：为此，您可以使用 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：

使用类的名称在 scss 中使用 mixin 给出特定的颜色

use the name of the classes to give a specific color using mixin in scss

html

sass

scss-mixins

使用 类 的名称在 scss 中使用 mixin 给出特定的颜色

use the name of the classes to give a specific color using mixin in scss

html

sass

scss-mixins

使用类的名称在 scss 中使用 mixin 给出特定的颜色