是否可以在 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-count 的值与列表项的数量相匹配。）SASS 可以计算列表项并将该数量保存为变量吗？
任何想法将不胜感激。
【问题讨论】：
content:，但我需要整数来计算东西。无论如何，我今天学到了一些东西，所以谢谢。
Sass 只是一个 CSS 生成器。它不会真正与您的 HTML 交互，因此您不能将 HTML 属性用作 Sass 变量。
但是，CSS 可以根据属性进行选择。所以它会比你想要的更冗长，但你可以做类似的事情
ul[data-count="3"]:after
content: "There were three items in that list!"
我认为如果您愿意将自己限制为仅使用最新浏览器的子集†，您可以将 CSS calc() 函数与 @ 一起使用987654323@ 在基于 CSS 的计算中使用该属性。但这是非常前沿的。
† 老实说，我不知道哪些浏览器的哪个版本已经完全实现了这一点。我很确定 Firefox 有它，虽然我没有使用过它，而且我不知道其他浏览器。无论如何，它肯定没有得到很好的支持。
【讨论】：
calc() 和attr() 的交互，我认为它没有得到很好的支持。 calc() 本身是最近才出现的，但它远没有支持在计算中使用属性那么奇特。
calc() 和 attr() 对我来说是新闻，它们可能对我遇到的其他一些问题有用。但由于它们似乎只适用于content:，因此我无法将它们用于手头的任务，因为我需要整数来计算。不过还是谢谢。
您似乎正试图在 CSS 中获取无序列表中的项目数量（也许根据兄弟姐妹的数量来改变它们的大小？）。
确实，您不能将数据属性用作 Sass 变量。但是有一种纯 CSS 方法可以根据父项的数量应用条件样式。另外，它很容易用 Sass 编写。
假设您的列表中的最大项目数是 10，并且您想根据列表中的 li 标签数计算 li 标签的大小。
@for $i from 1 through 10 {
li:first-child:nth-last-child(#{$i}),
li:first-child:nth-last-child(#{$i}) ~ li {
width: (100%/$i);
}
}
这将输出以下 CSS：
li:first-child:nth-last-child(1),
li:first-child:nth-last-child(1) ~ li {
width: 100%;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.33333%;
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
width: 16.66667%;
}
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(7) ~ li {
width: 14.28571%;
}
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(8) ~ li {
width: 12.5%;
}
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(9) ~ li {
width: 11.11111%;
}
li:first-child:nth-last-child(10),
li:first-child:nth-last-child(10) ~ li {
width: 10%;
}
基本上，这给了 li 标签的宽度：
100.0%只有一个li标签时50.00%当有2个li标签时33.33%当有3个li标签时25.00%当有4个li标签时20.00%当有5个li标签时16.66% 当有 6 个 li 标签时14.28%当有7个li标签时12.50%当有8个li标签时11.11%当有9个li标签时10.00%当有10个li标签时如需现场示例，请参阅this demo 我使用相同的技巧。希望对你有帮助。
【讨论】：