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

Q：如何访问

数据属性的值并在声明中使用它？

编辑：我正在扩展范围以包括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规则重构为类似以下伪代码的内容：

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

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


.black{
背景：黑色；
字体大小：30px；
}

这个文本应该是绿色的
这个文本应该是红色的
此文本应为白色
你不能使用CSS，你需要使用JavaScript。你想解释一下如何使用JavaScript吗？@JBDouble05不，他不需要JS，他需要SASS或LESS@JBDouble05，我很害怕。@Temaniaf如果我愿意接受一种无礼的方式，等一个无礼的家伙，你会得到它；）使用SASSI很容易做到这一点。感谢您的帮助，但是，它必须是一个
data
属性，因为我使用它的真正原因是更改
li
tag:）上的数字。不过，我肯定会记住这一点。@AminShahGilani更改li的数字是什么意思？我很确定这可以在没有数据属性的情况下完成；）在正常情况下，是的，但它们仅限于数字或单个alpha（分别为1、2、3和a、b、c），但在我转换的文档中，一些列表中有1、2、2A、3、4、5等项。立法机构的糟糕程度令人难以置信。这里：@AminShahGilani CSS变量可以做到这一点，我不认为数据属性在这种情况下有什么帮助
div[data-color=VALUE] {
  color: VALUE;
}