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

Question

这是我的Html。我把数据视图称为190。

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

这是我的CSS代码。我试图动态获取数据属性值。如何将此数据视图的值作为宽度。

$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) legal ，但是unsupported by any browser at the moment。不幸的是，你无能为力。

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