在 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?

任何想法将不胜感激.

推荐答案

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() 一起在基于 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屋！