使用数据属性值作为 sass 变量中的值

Question

我有 json 添加数据属性，并想使用数据属性的值来控制元素的宽度。

我的 sass 编译器在抱怨。

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

 $popularity: [data-views]

  .og-grid li > a,
  .og-grid li > a img
      width: $popularity

Answer 1

我认为你不能用 SASS 那样获取 DOM 数据属性。您可以为每个值使用一个类，显然如果有太多，这并不理想：

CSS类解决方案：

.lecture[data-views='190']{
  width: 190px;
}

替代方案也可以是 jQuery：

$('.lecture').each(function(i){
     $(this).width($(this).data('views'));
});