在SASS中访问HTML属性值

小编典典

html

是否可以在SASS中访问HTML属性值？我有一行代码说

<ul id="my_id" data-count="3">

哪里3是一些jQuery东西的结果。我需要3计算一些CSS。如何将其另存为SASS变量？

或者，是否可以计算某个父元素的子元素数量？说我有这段代码：

<ul id="my_id" data-count="3">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ul>

（您可能已经猜到了，data-countmatches的值与列表项的数量匹配。）SASS可以对列表项进行计数并将该数字保存为变量吗？

任何想法将不胜感激。

阅读 665

2020-05-10

共1个答案

小编典典

Sass只是CSS生成器。它实际上并没有与HTML交互，因此您不能将HTML属性用作Sass变量。

但是，CSS可以基于属性进行选择。因此，它可能会比您想要的更长，但您可以执行以下操作

ul[data-count="3"]:after
  content: "There were three items in that list!"

而且我 认为， 如果您只想限制自己使用最新浏览器的一个子集†，则可以将CSScalc()函数与attr()一起使用，以在基于CSS的计算中使用该属性。但这是非常前沿的。

†老实说，我不知道哪个浏览器的哪个版本已完全实现此目的。我很确定Firefox拥有它，尽管我没有使用过它，而且我对其他浏览器一无所知。无论如何，它肯定没有得到很好的支持。

2020-05-10