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

Question

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

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

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

$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-view属性的元素。
2. width: attr(data-views)是合法的，但目前任何浏览器都不支持。不幸的是，您对此无能为力。

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