从 html(.erb) 在 sass/css 中动态设置 div 颜色

Question

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

比如……

注意两个div的黑色部分

大多数 html/css 解决方案使用 css 的 :before & :after 伪选择器来添加两个 div 的黑色部分。 （结帐代码发布在下面）。我最初的想法是我希望能够将颜色传递给 css/scss 以设置前后。经过一番研究，我意识到您不能通过内联样式执行:before/:after，无论如何我会说这是一个丑陋的解决方案。

我更喜欢 React css in js，这是一个非常简单的任务。我也愿意放弃这个 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 %>

Answer 1

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

也就是说，如果我们定义了一个文本颜色，那么currentColor值可以用于背景和/或边框。

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

如果currentColor 被用作颜色属性的值，它会取而代之的是从颜色属性的继承值中获取其值。

^MDN

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

.tcd-primary:after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  left: 100%;
  border-right: 50px solid transparent;
  border-top: 100px solid currentColor;
}

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

.tcd-secondary:before {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  right: 100%;
  border-left: 50px solid transparent;
  border-bottom: 100px solid currentColor;
}

<div class="tcd-primary" style="color: gold; "></div>
<div class="tcd-secondary" style="color:orange;"></div>

<div class="tcd-primary" style="color: green; "></div>
<div class="tcd-secondary" style="color:silver;"></div>

---

如果你想真正更新，你可以使用带有角度线性渐变的单个 div 和CSS Custom Properties

div { 
  height: 100px;
  background-image: linear-gradient(
  135deg,
  var(--color-1) 60%, 
  transparent 60%, transparent 62%, /* this is your gap */
  var(--color-2) 62%
  );
}

<div style="--color-1: gold; --color-2: orange;"></div>
<div style="--color-1: green; --color-2: silver;"></div>