在 SASS 中访问 HTML 属性值

Question

是否可以在 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 可以计算列表项并将该数字保存为变量吗？

任何想法将不胜感激。

原文由 joschaf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

但是，CSS 可以根据属性进行选择。所以它会比你想要的更冗长，但你可以做类似的事情

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

而且我 _认为_，如果您愿意将自己限制在最新浏览器的子集中† ，您可以使用 CSS calc() 函数以及 attr() 来使用 CSS 中的属性-基于计算。但这是非常前沿的。

† 老实说，我不知道哪些浏览器的哪些版本已经完全实现了这一点。我很确定 Firefox 有它，虽然我没有使用过它，而且我不知道其他浏览器。无论如何，它肯定没有得到很好的支持。

原文由 Chuck 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

看起来您正试图在 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标签时

有关实际示例，请参阅我使用相同技巧所做的 演示。我希望它有所帮助。

原文由 user1705630 发布，翻译遵循 CC BY-SA 3.0 许可协议