从html（.erb）动态设置sass/css中的div颜色

我很难找到最好的方法。我想在数据库中存储对象的主颜色和次颜色，然后我想动态显示使用这两种颜色的分隔符

例如

注意两个div的黑色部分

大多数html/css解决方案都使用css“

：before

&

：after

伪选择器来添加两个div的黑色部分。（结帐代码贴在下面）。我最初的想法是，我希望能够将颜色传递给css/SCS，以设置前后的颜色。经过一点研究，我意识到你不能通过内联样式来做

：before/：After

，无论如何，我会说这是一个丑陋的解决方案

我更喜欢js中的React css，这是一项非常简单的任务。我也愿意放弃这个html/css方面，并以不同的方式来做，因为我现在的处理方式似乎过于复杂了

任何帮助都会很好！非常感谢你

.tcd-primary {
  min-height: 100px;
  position: relative;
  width: calc(50% - 30px);
  float: left;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    left: 100%;
    border-right: 50px solid transparent;
    border-top: 100px solid black; /* this should be the primary color instead of black */
  }
}

.tcd-secondary {
  min-height: 100px;
  position: relative;
  width: calc(50% - 30px);
  float: right;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    right: 100%;
    border-left: 50px solid transparent;
    border-bottom: 100px solid black; /* this should be the secondary color rather than black */
  }
}

下面是html.erb的简化版本：

<% teams.each do |team| %>
  <p><%= team.name %></p>

  <div class="tcd-primary" style="background: <%= team.primary_color %>;"></div>
  <div class="tcd-secondary" style="background: <%= team.secondary_color %>;"></div>
<% end %>

由于这些只是彩色div，没有文本，我们可以利用

currentColor

的继承性

也就是说，如果我们定义了文本颜色，那么

currentColor

值可用于背景和/或边框

currentColor

关键字表示元素颜色属性的值。这使您可以在默认情况下不接收颜色值的属性上使用颜色值

如果将

currentColor

用作颜色属性的值，它将从颜色属性的继承值中获取其值

.tcd初级{
最小高度：100px；
位置：相对位置；
宽度：计算（50%-30px）；
浮动：左；
背景：彩色；
}
.tcd初级：之后{
内容：''；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
左：100%；
右边框：50px实心透明；
边框顶部：100px纯色；
}
.tcd中学{
最小高度：100px；
位置：相对位置；
宽度：计算（50%-30px）；
浮动：对；
背景：彩色；
}
.tcd二级：之前{
内容：''；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
右：100%；
左边框：50px实心透明；
边框底部：100px纯色；
}

---

由于这些只是彩色div，没有文本，我们可以利用

currentColor

的继承性

也就是说，如果我们定义了文本颜色，那么

currentColor

值可用于背景和/或边框

currentColor

关键字表示元素颜色属性的值。这使您可以在默认情况下不接收颜色值的属性上使用颜色值

如果将

currentColor

用作颜色属性的值，它将从颜色属性的继承值中获取其值

.tcd初级{
最小高度：100px；
位置：相对位置；
宽度：计算（50%-30px）；
浮动：左；
背景：彩色；
}
.tcd初级：之后{
内容：''；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
左：100%；
右边框：50px实心透明；
边框顶部：100px纯色；
}
.tcd中学{
最小高度：100px；
位置：相对位置；
宽度：计算（50%-30px）；
浮动：对；
背景：彩色；
}
.tcd二级：之前{
内容：''；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
右：100%；
左边框：50px实心透明；
边框底部：100px纯色；
}

@Paulie\u正确！只需为每个团队动态渲染我想要的彩色区域。请参见下面的答案。使用

color

作为内联样式，然后在CSS中使用

currentColor

。@Paulie\u更正！只需为每个团队动态渲染我想要的彩色区域。请参见下面的答案。使用

color

作为内联样式，然后在CSS中使用

currentColor

。非常感谢！这很有效。谢谢你今天教我新东西。非常感谢！这很有效。谢谢你今天教我新东西。