dom – 在SASS中访问HTML属性值

前端之家收集整理的这篇文章主要介绍了dom – 在SASS中访问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>

(正如您可能已经猜到的那样,数据计数的值与列表项的数量相匹配.)SASS可以计算列表项并将该数字保存为变量吗?

任何想法将不胜感激.

解决方法

Sass只是一个CSS生成器.它并不真正与您的HTML交互,因此您不能将HTML属性用作Sass变量.

但是,CSS可以根据属性进行选择.所以它会比你想象的更啰嗦,但是你可以做类似的事情

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

我认为如果你愿意将自己仅限于最近的浏览器的一部分†,你可以使用CSS calc()函数和attr()在基于CSS的计算中使用该属性.但这是非常前沿的.

†说实话,我不知道哪个版本的浏览器已完全实现了这一点.我很确定Firefox有它,虽然我没有使用它,我不知道其他浏览器.无论如何,它肯定得不到很好的支持.

猜你在找的HTML相关文章