文章/答案/技术大牛

发布

社区首页 >问答首页 >在scss类名中使用十六进制编码生成相同十六进制编码的css颜色类

问在scss类名中使用十六进制编码生成相同十六进制编码的css颜色类
EN

Stack Overflow用户

提问于 2020-07-16 02:58:58

回答 1查看 409关注 0票数 1

我正在尝试定义全局颜色，并编写了一个scss编译器将所有颜色编译为其各自的类名，但当我尝试在html 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-#{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;
}

任何帮助都将不胜感激。

html

css

sass

colors

css-selectors

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-16 03:23:04

您需要转义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;
    }
  }

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62922003

复制

相似问题

问在scss类名中使用十六进制编码生成相同十六进制编码的css颜色类
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在scss类名中使用十六进制编码生成相同十六进制编码的css颜色类EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在scss类名中使用十六进制编码生成相同十六进制编码的css颜色类
EN