在SASS中访问HTML属性值 [英] Access HTML attribute value in SASS

问题描述

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

Is it possible to access an HTML attribute value in SASS? I have a line of code that says

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

其中 3 是一些jQuery的东西我需要 3 来计算一些CSS。如何将其保存为SASS变量？

where the 3 is the result of some jQuery stuff. I need the 3 to calculate some CSS. How can I save it as a SASS variable?

或者，有没有办法计算某个父元素的子元素的数量？说我有这个代码：

Alternatively, is there a way of counting the number of child elements of a certain parent element? Say I have this code:

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

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

(As you might have guessed, the value of data-count matches the number of list items.) Can SASS count the list items and save that number as a variable?

任何想法将不胜感激。 / p>

Any ideas would be greatly appreciated.

推荐答案

Sass只是一个CSS生成器。它不会真正与您的HTML进行交互，因此您不能将HTML属性用作Sass变量。

Sass is just a CSS generator. It doesn't really interact with your HTML, so you can't use HTML attributes as Sass variables.

但是，CSS可以基于属性进行选择。所以它会比你想要的更长久，但你可以做一些类似

However, CSS can select based on attributes. So it will be more long-winded than you might like, but you can do something like

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

如果您愿意将自己仅限于您可以使用CSS calc（）函数与 attr（）† c $ c>在基于CSS的计算中使用该属性。但是这很流行。

And I think if you're willing to limit yourself only to a subset of very recent browsers^†, you can use the CSS calc() function along with attr() to use the attribute in CSS-based calculations. But that's pretty bleeding edge.

^{†说实话，我不知道哪个版本的浏览器已经完全实现了这一点。我很确定Firefox有它，虽然我没有使用它，我不知道其他浏览器。这绝对不是很好的支持，无论如何。}

这篇关于在SASS中访问HTML属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！