在 scss 类名中使用 hex-code 生成相同 hex-code 的 css 颜色类

Question

我正在尝试定义全局颜色，并且我编写了一个 scss 编译器来将所有颜色编译为其各自的类名，但是当我尝试在我的 html div 中使用它们时，颜色不适用于它。

scss sn-p:

$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;

$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;

@each $color in $allcolors {
    
    .color-#{nth($color, 1)} {
      color: nth($color, 1);
    }
  }

我在我的 html div 中将其称为

<div class="color-#CCCCCC">TEST</div>

我没有看到我的样式被应用，当我尝试编译它时，我可以看到我的 css 样式编译如下所示

.color-#001233 {
    color: #001233;
}

.color-#002132 {
    color: #002132;
}

.color-#004237 {
    color: #004237;
}

.color-#003027 {
    color: #003027;
}

.color-#CCCCCC {
    color: #CCCCCC;
}

.color-#FFFFFF {
    color: #FFFFFF;
}

任何帮助将不胜感激。

Answer 1

您需要在 CSS 文件中转义 #，因为它是用于 ID 选择器的特殊字符。

.color-\#CCCCCC {
    color: #CCCCCC;
}

<div class="color-#CCCCCC">TEST</div>

您可以相应地调整您的 SCSS 以添加 \

$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;

$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;

@each $color in $allcolors {
    .color-#{unquote("\\" + $color)} {
      color: $color;
    }
  }