如何访问数据属性的值并在CSS声明中使用它

Question

问：如何访问data-attribute的值并在声明中使用它？

编辑：我正在扩大范围以包括Sass。

例如，假设我具有以下HTML：

<div class="black box">
  <div data-color="green">
    This text should be green
  </div>

  <div data-color="red">
    This text should be red
  </div>

  <div data-color="white">
    This text should be white
  </div>
</div>

这就是这个：

使用以下CSS：

/* Ignore this */
.black.box {
  background-color: black;
}


/* Refactor the three rules below into a single rule */
div[data-color="green"] {
  color: green;
}

div[data-color="red"] {
  color: red;
}

div[data-color="white"] {
  color: white;
}

---

如何将三个重复的CSS规则重构为伪代码：

div[data-color=VALUE] {
  color: VALUE;
}

这里有很多帮助：https://jsfiddle.net/gilani/54de0zn6/7/

Answer 1

在这种特殊情况下，使用内联样式是一种解决方案，因为值已内联添加：

.black {
  background:black;
  font-size:30px;
}

<div class="black box">
  <div style="color:green">
    This text should be green
  </div>

  <div style="color:red">
    This text should be red
  </div>

  <div style="color:white">
    This text should be white
  </div>
</div>

对于更复杂的情况（也依赖于内联样式），您也可以考虑使用CSS变量

.black {
  background:black;
  font-size:30px;
}

.black > div {
  color:var(--c);
  border:5px solid var(--c);
}

<div class="black box">
  <div style="--c:green">
    This text should be green
  </div>

  <div style="--c:red">
    This text should be red
  </div>

  <div style="--c:white">
    This text should be white
  </div>
</div>