如何在 css 正则表达式中获取 html 数据属性值

Question

这是我的 HTML。我给出的数据视图为 190。

<ul>
   <li class="lecture" data-views="190"></li>
</ul>

这是我的 CSS 代码。我正在尝试动态获取数据属性值。我怎样才能得到这个 data-views 的值作为宽度。

$aaa:attr(data-views);
ul li:before{
  content:$aaa;
}
[data-views='$aaa']{
font-size:40px;
}
ul li{
  width : $aaa;
}

Answer 1

您的 SCSS 生成以下 CSS：

ul li:before {
  content: attr(data-views);
}

[data-views='$aaa'] {
  font-size: 40px;
}

ul li {
  width: attr(data-views);
}

这是完全有效的 CSS，但有两个问题：

1. [data-views='$aaa'] 可能不是您想要的，[data-views] 更有意义。这将选择（对..）具有 data-views 属性的元素。
2. width: attr(data-views) 合法，但 unsupported by any browser at the moment。很遗憾，您对此无能为力。

由于 SASS（与所有其他预处理 CSS 风格一样）生成标准 CSS，因此您只能做 CSS 允许您做的任何事情。您不能让预处理器从不存在的（编译时）标​​记中“计算”CSS 规则。